Question

我正在Jsfiddle执行angularjs示例演示。我只是创建一个angularjs指令，它将显示一个背景颜色为红色的div，其中静态文本包含数据绑定作为模板。

var objApp = angular.module("myApp", []);
objApp.controller("myAppController", 
    function($scope) {
       $scope.name2="temp";
    });

objApp.directive("myAppDirective",
    function(){
        return {
           template : "<div style='background-color:red'>"+
                           "Hello {{name}}"+
                           "<div ng-transclude></div>"+
                      "</div>",
           scope : true,
           transclude : true,
           controller : function($scope) {
               $scope.name = "tempController";
           },
           compile : function(tElem, attrs, transcludeFn) {
               return function(scope, iElem, attrs, transcludeFn) {
                   console.log(iElem.html());
                   //iElem.html("<div ng-show='false'>" + 
                   //                  iElem.html() + 
                   //            "</div>");
               }
           }
  });

当评论以下行时，每个绑定都可以正常工作。

iElem.html("<div ng-show='false'>" + iElem.html() + "</div>")

但是一旦删除评论，绑定就会被破坏。为什么会这样？我是否必须在新的html上使用$ compile，我在iElem上设置？当这条线被评论时，它是否已编译？我找到了答案，但没有一个能帮助我。

Answer 1

是。你需要使用$ compile如下

$compile('<div ng-show="false">'+iElem.html()+'</div>')($scope, function(cloned, scope){
                elem.append(cloned); 
});

编辑：似乎您的问题与此帖相似。查看here

指令link（）中的数据绑定不能正常工作？

1 个答案: