AngularJS中的$compile服务

来源：互联网发布：godaddy域名续费价格编辑：程序博客网时间：2024/05/20 07:59

出处：http://odetocode.com/blogs/scott/archive/2014/05/07/using-compile-in-angular.aspx

创建一个AngularJSP的指令很容易，譬如下面这个例子

{{ message }}
<divotc-dynamic></div>

otcDynamic指令提供了一串HTML模板

app.directive("otcDynamic",function(){
   return{
       template:"<button ng-click='doSomething()'>{{label}}</div>"
   };
});

结合控制器的定义，当用户点击按钮时，便会在页面上看到内容的变化

app.controller("mainController",function($scope){
 
    $scope.label = "Please click";
    $scope.doSomething = function(){
      $scope.message = "Clicked!";
    };
 
});

动态化

假设otcDynamic指令不能使用静态模板。指令需要依赖上下文环境，譬如标记位、用户数据、服务信息等。下面来模拟这个场景，我们还是使用静态字符串，不过假设字符串是动态创建的，并且使用element.html函数插入到DOM元素中。

app.directive("otcDynamic",function(){
    return{
        link:function(scope, element){
            element.html("<button ng-click='doSomething()'>{{label}}</button>");
        }
    };
});

上面的例子中，lablel内容不在会发生变化，即使用户点击按钮。最关键的原因时AngularJS已经过了编译阶段。

编译服务

借助AnglarJS的编译$compile服务，可以解决此问题

app.directive("otcDynamic",function($compile){
    return{
        link:function(scope, element){
            vartemplate = "<button ng-click='doSomething()'>{{label}}</button>";
            varlinkFn = $compile(template);
            varcontent = linkFn(scope);
            element.append(content);
        }
    }
});

如果要元素事件中或者非AngularJS的代码中使用$compile服务，需要配合$apply检测数据变化。

app.directive("otcDynamic",function($compile) {
     
    vartemplate = "<button ng-click='doSomething()'>{{label}}</button>";
     
    return{
        link:function(scope, element){
            element.on("click",function() {
                scope.$apply(function() {
                    varcontent = $compile(template)(scope);
                    element.append(content);
               })
            });
        }
    }
});

0 0