指令中的重新连接指令

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