Angular指令引用錯誤的元素

我有一個問題，我在ng重複中使用幾個類似元素的指令在調用keyup函數時顯示錯誤的元素。Angular指令引用錯誤的元素

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>

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是repea ted，只有nameContainer中的輸入在keyup上傳遞（記錄元素將在同一父div的nameContainer中顯示輸入，即使aliasContainer中的輸入是觸發元素）。

來源

2014-09-27 user1203349

隔離範圍你已經混'NG-repeat'在你plunkr'NG-controller'。這裏是固定版本：http://plnkr.co/edit/ARFlsgPdxikpzLScztxU?p=preview – akn 2014-09-27 23:38:19

謝謝。現在問題是可觀察的。 – user1203349 2014-09-27 23:50:21

要重用您的指令並保留其範圍從外部範圍（控制器）分開，你需要有一個你的指令

app.directive('objKey', function() { 
    return { 
    restrict: 'A', 
    scope: true,  // << Isolating scope 
    link: .... 
    } 
};

來源

2014-09-27 23:48:46

你應該看看指令的範圍：https://docs.angularjs.org/guide/directive

如果不隔離的範圍，你的指令的範圍將與申報時的範圍相同，在這種情況下，它將使用由ng-repeat創建的子範圍。

爲了解決這個問題，只是scope: true

來源

2014-09-27 23:50:51

Angular指令引用錯誤的元素

回答

相關問題