suchen

Heim  >  Fragen und Antworten  >  Hauptteil

angular.js - angular如何手动编译后插入的dom？

在页面进行一些操作后，会插入一段html代码
如何编译这段html，使绑定在上面的事件啦，变量生效啊~

滿天的星座滿天的星座2779 Tage vor738

Antworte allen(3)Ich werde antworten

  • PHP中文网

    PHP中文网2017-05-15 16:53:11

    angular出于安全考虑，我们插入的html代码里的事件和绑定的ng-model都不会起作用。

    如果要起作用，需要使用angular的$compile service

    我一般处理的时候会使用一个directive

    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是需要插入的html代码变量

    Antwort
    0
  • 迷茫

    迷茫2017-05-15 16:53:11

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

    Antwort
    0
  • 世界只因有你

    世界只因有你2017-05-15 16:53:11

    <!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>

    写过一个例子，如上。

    Antwort
    0
  • StornierenAntwort