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 and generated elements

指令中的重新布线指令

1 个答案: