我有一个问题,我在ng重复中使用的几个类似元素的指令在调用keyup函数时显示错误的元素.
plunker:http://plnkr.co/edit/ARFlsgPdxikpzLScztxU？p =preview
这是相同的代码:
html
<body ng-app="app">
<section ng-controller="MainController" ng-repeat="item in list">
<div ng-repeat="item in list">
<h3>Item {{$index}}</h3>
<div class="aliasContainer">
<input text="text" obj-key="alias" value="{{item.alias}}" ng-keyup="logItem($event, item)">
</div>
<div class="nameContainer">
<input text="text" obj-key="name" value="{{item.name}}" ng-keyup="logItem($event, item)">
</div>
</div>
</section>
<script src="https://code.angularjs.org/1.2.25/angular.js"></script>
<script src="script.js"></script>
</body>
JS
var app = angular.module('app', []);
app.controller('MainController', ['$scope', function($scope){
console.log("hello ctrl");
$scope.list = [
{name: 'Dick Grayson', alias: 'Nightwing'},
{name: 'Bruce Wayne', alias: 'Batman'},
{name: 'Jason Todd', alias: 'Robin'}
];
}]);
app.directive('objKey', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
scope.logItem = function($event, item) {
console.log(element);
};
}
};
});
链接函数展示的行为是对于每个重复的div,只有nameContainer中的输入才会传递给keyup(即使aliasContainer中的输入是触发,记录元素也会显示同一父div的nameContainer中的输入)元件.)
要重用您的指令并将其范围与外部作用域(控制器)分开,您需要使用isolate scope指令
app.directive('objKey', function() {
return {
restrict: 'A',
scope: true, // << Isolating scope
link: ....
}
};