Угловая директива, ссылающаяся на неправильный элемент

У меня проблема, когда директива, которую я использую для нескольких аналогичных элементов в повторе 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>

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, что это повторение ted, только вход в nameContainer передается при активации ключа (запись в элементе будет отображать вход в nameContainer того же родительского div, даже если вход в aliasContainer был элементом запуска.)

источник

2014-09-27 user1203349

Вы имеете смешанный 'нг-repeat' с' нг-controller' в вашем plunkr. Вот исправленная версия: http://plnkr.co/edit/ARFlsgPdxikpzLScztxU?p=preview – akn

спасибо. проблема теперь наблюдается. – user1203349

Повторное использование вашей директивы и ведение сфера его применения отдельно от внешней области (контроллер), вы должны иметь isolate scope к вашей директиве

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

Угловая директива, ссылающаяся на неправильный элемент

ответ

Смежные вопросы