如何從屬性指令更改元素的範圍？

<input type='text' ng-model='foo' my-dir='customFunction' /> 
{{foo}} 


.directive('myDir',function(){ 
    scope:{ customFunc : "&myDir"}, 
});

現在範圍將被myDir覆蓋，並且foo不會在屏幕上更新。但是仍然每個具有my-dir屬性的控件在一個隔離範圍內應該有customFunction。如何從屬性指令更改元素的範圍？

可能嗎？

來源

2013-04-15 Agzam

究竟是你想實現什麼目標？您是否試圖將指令附加到輸入字段，並且您希望指令能夠在父範圍上調用方法？如果是這樣，你不需要隔離作用域 - 隔離範圍[與ng-model有問題]（http://stackoverflow.com/questions/11896732/ngmodel-and-component-with-isolated-scope）。 –

我試圖讓一個指令限制爲可以調用該屬性中設置的任意函數的屬性 – Agzam

根據指令的使用位置決定如何編寫它。如果該指令不會與其他指令一起使用，則可以使用隔離範圍。如果它將與其他指令（如ng-repeat，ng-model等）一起使用，則可能需要創建一個不創建新範圍或創建子範圍（不是隔離範圍）的指令。對於非隔離情況，您可以通過屬性值傳遞函數的名稱，然後在鏈接函數中使用[$ eval]調用它（http://docs.angularjs.org/api/ng.$rootScope .scope＃$ eval）：'scope。$ eval（attrs.myDir）' –

正如上述評論中所提到的，一條指令可能無處不在。如果該指令將與其他指令如ng-model，ng-repeat等一起使用，則隔離範圍可能不起作用。下面是一個使用$eval，並且不會創建一個新的範圍指令的例子：

<div ng-controller="MyCtrl"> 
    <input type='text' ng-model='foo' my-dir='customFunction'> 
    <br>foo={{foo}} 
</div> 


app.directive('myDir', function() { 
    return { 
     link: function(scope, element, attrs) { 
      scope.$eval(attrs.myDir); 
     }, 
    } 
}); 


function MyCtrl($scope) { 
    $scope.customFunction = alert('hi'); 
    $scope.foo = '22'; 
}

Fiddle

參見When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?

來源

2013-04-15 22:04:08

如何從屬性指令更改元素的範圍？

回答

相關問題