AngularJS中的$compile服务

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

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

{{ message }}
<div otc-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){
            var template = "<button ng-click='doSomething()'>{{label}}</button>";
            var linkFn = $compile(template);
            var content = linkFn(scope);
            element.append(content);
        }
    }
});

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

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