angular.js - Bagaimana untuk menyusun dom yang dimasukkan secara manual dalam sudut?
滿天的星座
滿天的星座 2017-05-15 16:51:11
0
3
734

Selepas melakukan beberapa operasi pada halaman, sekeping kod html akan dimasukkan
Bagaimana untuk menyusun html ini supaya peristiwa dan pembolehubah yang terikat padanya berkuat kuasa~

滿天的星座
滿天的星座

membalas semua(3)
洪涛

Atas sebab keselamatan, acara Angular dalam kod HTML yang kami masukkan dan model ng terikat tidak akan berfungsi.

Jika anda mahu ia berfungsi, anda perlu menggunakan perkhidmatan $compile angular

Saya biasanya menggunakan arahan semasa memproses

javascriptangular.module(...).directive('jxbBindCompiledHtml', function ($compile) {
  'use strict';

  return {
    template: '

<p></p>

',
    scope: {
      rawHtml: '=jxbBindCompiledHtml'
    },
    link: function (scope, elem, attrs) {
      scope.$watch('rawHtml', function (value) {

        if (!value) {
          return;
        }

        // we want to use the scope OUTSIDE of this directive
        // (which itself is an isolate scope).
        var newElem = $compile($.parseHTML(value))(scope.$parent);
        elem.contents().remove();
        elem.append(newElem);
      });
    }
  };
});

html

html<p jxb-bind-compiled-html="htmlvariable">
</p>

htmlvariable ialah pembolehubah kod html yang perlu disisipkan

迷茫

http://stackoverflow.com/questions/11771513/angularjs-jquery-how-to-get-dynamic-content-working-in-angularjs

世界只因有你
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>angular编译插入到dom的元素</title>
</head>
<body ng-controller="appCtrl">
    
    <!-- javascript
        ================================================== -->
    <script src="http://cdn.staticfile.org/jquery/2.1.0/jquery.min.js" type="text/javascript"></script>
    <script src="http://cdn.staticfile.org/angular.js/1.2.0rc3/angular.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var app = angular.module('app', []);
        app.controller('appCtrl', function ($scope, $compile) {
            $scope.arrs = [1,2,3,4,5,"成", "功", "编", "译"];
            var html = '<h1 ng-repeat="arr in arrs">{{ arr }}</h1>';
            
            // 编译html
            $html = $compile(html)($scope);
            // 插入到dom
            $('body').before($html);
        });
        angular.bootstrap(document, ['app']);
    </script>
</body>
</html>

Saya menulis contoh, seperti di atas.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan