Как связать переменную ng-repeat с пользовательской угловой директивой?

Question

Как связать переменную ng-repeat с пользовательской угловой директивой?

0

В Angular (v1.3) как вы привязываете переменную от ng-repeat к пользовательской директиве?

Все примеры, похоже, привязаны к переменной $ scope. например, учитывая список продуктов и пользовательскую директиву, называемую продуктом, как мы можем что-то сделать с этой целью:

<li ng-repeat="product in products">
    <product item="product" />
</li>

Если директива создана как:

(function () {
    'use strict';

    var productDirective = function () {
        return {
                restrict: 'E',
                scope: {item: '='},
                templateUrl: '/views/product.html',                 
            };
    };

    angular
        .module('myApp')
        .directive('product', productDirective);

})();

И у него очень простой шаблон:

<p>{{item.name}} {{item.price}}</p>

Это не работает, потому что scope: '=' привязывается только к $ scope, а не к ng-repeat.

Мне удалось заставить его работать с

return {
            restrict: 'E',
            scope: {item: '@'},
            templateUrl: '/views/product.html',

            link: function(scope, element, attributes){
                scope.item = scope.$eval(attributes.item);
            }
        };

Но использование $ eval на самом деле не приемлемо (плохой стиль).

Каков правильный угловой способ достичь этого?

JK. 21 июль 2016, в 08:44

Источник

Теги:

angularjs

angularjs-directive

angularjs-ng-repeat

3 ответа

Ещё вопросы

Alec Kravets · Answer 1 · 2016-07-21T05-36-00.000Z

Это не работает, потому что scope: '=' привязывается только к $ scope, а не к ng-repeat.

Это не должно терпеть неудачу, потому что ng-repeat создает простор для каждой итерации и помещает текущий product в ней наряду с другим циклом варов как $index. Таким образом, product фактически находится в области действия, и вы можете привязываться к нему в обычном режиме.

Я создал FIDDLE без изменений в вашем коде, чтобы подтвердить это.

Ahmad Baktash Hayeri · Answer 2 · 2016-07-21T04-00-00.000Z

Это не работает, потому что scope: '=' привязывается только к $ scope, а не к ng-repeat.

Я не совсем понимаю, что вы подразумеваете под этим, но контекст bind = полезен, когда вы связываете объект с родительской областью директивы, которая на самом деле является контроллером, в котором вы использовали директиву product - чтобы изолированный объем директивы, а НЕ ng-repeat.

Поэтому в вашем случае вам фактически не нужно связывать объект с родительским контроллером, с изолированной областью директивы с трюком $eval.

Просто убедитесь, что в определенном родительском контроллере вы правильно определили массив products.

Вот демо, как вы можете заставить его работать.

Joel Richman · Answer 3 · 2016-07-21T03-09-00.000Z

Попробуйте добавить контроллер в productDirective:

 var productDirective = function () {
    return {
            restrict: 'E',
            scope: {item: '='},
            templateUrl: '/views/product.html',
            controller: ['$scope', function($scope) {}]
        };
 };

Что это делает? Это не имеет значения, шаблон не является обязательным и по-прежнему отображается пустым.
Я создал plnkr для демонстрации: plnkr.co/edit/t2CVoeUCz8WEy1UhR9J5?p=preview