angularjs - 在指令中重新布线指令

Question

所以在这个例子中 ng-hide 不会隐藏元素。为什么以及如何解决这个问题？

<div ng-app='myApp'>
    <input type='text' foo/>
</div>

angular.module('myApp',[])
  .directive('foo',function(){
    return{
        link:function(scope,element,attrs){
            element.after('<div style="width:200px; height:200px;'
                    +' background-color:red" ng-hide="true"></div>')
        }
    }
});

http://jsfiddle.net/BL8h5/

Answer 1

请参阅此更新示例：

http://jsfiddle.net/JxMTW/1/

angular.module('myApp',[])
.directive('foo',function($compile){
    return{
        link:function(scope,element,attrs){
            element.after($compile('<div style="width:200px; height:200px; background-color:red" ng-hide="true"></div>')(scope))
        }
    }
}); 

原因是这不是“角度”做事的方式——你应该避免“弄乱 DOM”，而是使用模板并让角度处理它。

在您的特定情况下，您需要做的是通过 运行新元素$compile，它解析内容并获取任何角度逻辑。

有关更多信息，请参阅此问题和答案： AngularJS 和生成的元素