Question

在Angular（v1.3）中，如何将变量从ng-repeat绑定到自定义指令？

所有示例似乎都绑定到$ scope变量。例如，给定一个产品列表和一个名为product的自定义指令，我们如何才能做到这一点：

<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，而不绑定到ng-repeat。

我能够使用

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

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

但是$ eval的使用当然不是可以接受的（糟糕的风格）。

达到此目的的正确角度方法是什么？

Answer 1

由于范围：＆＃39; =＆＃39;只绑定到$ scope，而不是ng-repeat。

我不太明白上述内容的含义，但是当从指令的父作用域绑定对象时，绑定上下文中的=很有用 - 实际上是您使用product指令的控制器 - 指向的隔离范围，而不是ng-repeat。

因此，在您的情况下，您实际上并不需要使用$eval技巧将对象从父控制器绑定到指令的隔离范围。

只需确保在特定的父控制器中，您已正确定义了products数组。

这是Demo如何让它发挥作用。

Answer 2

由于范围：＆＃39; =＆＃39;只绑定到$ scope，而不是ng-repeat。

它应 NOT 失败，因为ng-repeat会为每次迭代创建一个范围，并将当前product与其他循环变量（如$index一起放置）。因此，product实际上在范围内，您可以正常绑定它。

我创建了一个FIDDLE，但没有更改您的代码以确认这一点。

Answer 3

尝试将控制器添加到productDirective：

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

如何将ng-repeat变量绑定到自定义角度指令？

3 个答案: