如何从属性指令更改元素的范围？

<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

如何从属性指令更改元素的范围？

回答

相关问题