Question

任何人都可以解释为什么这样有效：

//Common directives
angular.module('mean.articles')
    .directive('checkout',['Cart', function(Cart) {
        return {
            restrict: 'A',
            template:   '<div data-ng-repeat="item in items">' +
            '<div class="clearfix item-box">'+
            '<div class="col-md-2 text-left item-pic"><img class="img-responsive img-rounded" alt="{{item.title}}" data-ng-src="/public/upload/{{item.pic}}"></div>'+
            '<div class="col-md-2 text-left item-quantity">{{item.quantity}}</div>'+
            '<div class="col-md-4 text-left item-title">{{item.title}}</div>'+
            '<div class="col-md-4 text-right item-tot" data-subtot="{{item.price * item.quantity}}">{{item.price * item.quantity}}</div>'+
            '</div>'+
            '</div>',
            link: function( scope , element , attributes ) {
                scope.items = Cart.get();
            }   
        };
    }]);

这不起作用

//Common directives
angular.module('mean.articles')
    .directive('checkout',['Cart', function(Cart) {
        return {
            restrict: 'A',
            template:   '<div data-ng-repeat="item in Cart.get()">' +
            '<div class="clearfix item-box">'+
            '<div class="col-md-2 text-left item-pic"><img class="img-responsive img-rounded" alt="{{item.title}}" data-ng-src="/public/upload/{{item.pic}}"></div>'+
            '<div class="col-md-2 text-left item-quantity">{{item.quantity}}</div>'+
            '<div class="col-md-4 text-left item-title">{{item.title}}</div>'+
            '<div class="col-md-4 text-right item-tot" data-subtot="{{item.price * item.quantity}}">{{item.price * item.quantity}}</div>'+
            '</div>'+
            '</div>',
            link: function( scope , element , attributes ) {

            }   
        };
    }]);

Answer 1

该模板只能访问其scope。

第二个示例不起作用，因为模板无法访问任何服务。 Cart等服务仅在指令的link方法中可用。

ng-repeat中的angularjs指令服务

1 个答案: