指令中的重新連接指令

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