在Angular中使用$ compile

转载自：http://odetocode.com/blogs/scott/archive/2014/05/07/using-compile-in-angular.aspx

在AngularJS中创建一个自定义指令很容易，我们从HTML开始一个简单的例子。

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

上述标记正在使用一个名为otcDynamic的指令，它只提供一个模板。

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>");
        }
    };
});

上述示例不再正常运行，只能向用户呈现显示文字文字{{label}}的按钮。

标记必须经过Angular的编译阶段来查找和激活诸如ng-click和{{label}}的指令。

汇编

$ compile服务是用于编译的服务。调用$ compile对标记将产生一个函数，您可以使用该函数将标记绑定到特定的范围（Angular称为链接函数）。链接后，您可以将DOM元素放入浏览器。

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);
        }
    }
});

如果您需要$编译以响应元素事件，例如单击事件或其他非角色代码，则需要调用$ 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);
               })
            });
        }
    }
});