搜索

首页  >  问答  >  正文

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

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

滿天的星座滿天的星座2867 天前805

全部回复(3)我来回复

  • PHP中文网

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

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

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

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

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    <code>javascript</code><code>angular.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);

          });

        }

      };

    });

    </code>

    html

    1

    2

    3

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

    </p>

    </code>

    htmlvariable是需要插入的html代码变量

    回复
    0
  • 迷茫

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

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

    回复
    0
  • 世界只因有你

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

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    <code class="html"><!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></code>

    写过一个例子,如上。

    回复
    0
  • 取消回复