我正在创建两个使用相同 Controller 的指令,因此我看到这两个指令在 Controller 之间共享数据。我想要的是数据每个指令都是唯一的,因此不应共享数据。
var app = angular.module("app",[]);
app.controller('myCtrl', function($scope){
$scope.data = {
name: 'Javier'
};
});
app.directive('dir1', function(){
return {
template: "<div style='background:red'><input type='text' ng-model='data.name'>{{data.name}}</div>",
controller: "myCtrl"
};
});
app.directive('dir2', function(){
return {
template: "<div style='background:yellow'><input type='text' ng-model='data.name'>{{data.name}}</div>",
controller: "myCtrl"
};
});
https://jsbin.com/vetikuvada/1/edit?html,js,output
因此,在我的示例中,我想要的是当我编辑其中一个文本框中的文本时,它不会触发另一个文本框中的更改。我知道 Controller 是用不同的实例部署的,但不知何故它们共享范围,我需要这是完全不同的。这可能吗?
该示例是一个非常复杂的应用程序的一小部分,因此我必须能够使用这种方法而不是其他方法来完成它。
最佳答案
app.directive('dir1', function(){
return {
/* defines an isolated scope where state is
not shared between other scopes */
scope: {},
template: "<div style='background:red'><input type='text' ng-model='data.name'>{{data.name}}</div>",
controller: "myCtrl"
};
});
评论this post有关定义如何初始化指令范围的更多信息。
关于javascript - Angular 具有相同 Controller 共享范围的两个不同指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32891429/