AngularJS: Добавление атрибута к элементу директивы внутри ng-repeat не работает

У меня есть директива, которая отлично работает при использовании в изоляции, но когда она используется внутри ng-repeat, она перестает работать. Я знаю, что ng-repeat создает собственную область изоляции, но это не имеет значения, поскольку я не пытаюсь сделать что-либо за пределами области выделения моей директивы. Я создал плункер, чтобы продемонстрировать проблему, которую вы можете увидеть здесь: http://plnkr.co/edit/Y4ADmznnDCZvuxJrcZQ0?p=preview.AngularJS: Добавление атрибута к элементу директивы внутри ng-repeat не работает

В функции компиляции директивы я добавляю атрибут ng-click для элемента. Обратите внимание, что ссылка «Это работает» (которая не находится в ng-repeat) отлично работает, но другие ссылки (которые находятся внутри ng-repeat) не работают.

Вот директива от plunker:

var app = angular.module('plunker', []); 
app.controller("AppCtrl", function($scope) { 
    $scope.users = [{ 
    name: 'John', 
    id: 1 
    }, { 
    name: 'anonymous' 
    }]; 
}); 
app.directive("myDir", function($compile) { 
    return { 
    controller: 'directiveController', 
    compile: function(el) { 
     el.removeAttr('my-dir'); 
     el.attr('ng-click', 'fxn()'); 
     var fn = $compile(el); 
     return function(scope){ 
     fn(scope); 
     }; 
    } 
    }; 
}) 
.controller("directiveController", function($scope) { 
    $scope.fxn = function() { 
     alert('It works'); 
    }; 
});

А вот HTML:

<!DOCTYPE html> 
<html ng-app="plunker"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="http://code.angularjs.org/1.2.12/angular.js" data-semver="1.2.12"></script> 
    <script src="app.js"></script> 
    </head> 

    <body> 
    <div> 
     <a my-dir>This works</a> 
     <a my-dir ng-repeat="id in [1,2]"><br>This does not work</a> 
    </div> 
    </div> 
    </body> 

</html>

источник

2014-12-27 Jim Cooper

Попробуйте его с обязательным событие в функции связи вместо того, чтобы добавить еще один атрибут, который должен (DEMO):

app.directive("myDir", function($compile) { 
    return { 
    controller: 'directiveController', 
    compile: function(el) { 
     el.removeAttr('my-dir'); 

     var fn = $compile(el); 
     return function(scope, el){ 
     el.bind('click', scope.fxn); 
     fn(scope); 
     }; 
    } 
    }; 
})

источник

2014-12-27 21:12:52

Спасибо, @ marcel-gwerder, что действительно работает, однако, это ха одна проблема, которая мешает мне работать на меня. Я слишком упростил свой Плункер ради вопроса. Мне действительно нужно вызвать функцию на родительском контроллере. Поэтому, хотя это работает, и я могу заставить его вызвать родительский метод (передав его в области выделения), я не могу понять, как передать аргумент. Вот обновленный Plunker, показывающий проблему: http://plnkr.co/edit/uRGkoh4qrYQhDxi2OlP8?p=preview. Благодаря! –

Можете ли вы рассказать мне, почему вам нужно все это директивное вещество, а не просто: '
{{user.name}}'? –

Это часть более крупного приложения, которое я упростил для этого вопроса. У меня есть директива формы, которая имеет директиву формы-страницы, которая имеет множественную директиву строки-строки, и у них есть несколько директив-столбцов. Когда пользователь нажимает на столбец формы, мне нужно уведомить внешнюю форму и передать этот столбец методу в контроллере формы. –

AngularJS: Добавление атрибута к элементу директивы внутри ng-repeat не работает

ответ

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