Question

具有以下属性指令。

angular.module('app.directives.auctionItemCard', [])
        .directive('auctionItemCard', function() {
        return {
            restict: 'A',
            scope: {
                auctionItem: '=',
                actionWatch:'&'
            },
            templateUrl: 'app/auctionTangoApp/template/itemTemplate.html',
            link:function(scope, element,attrs) {
                console.log(scope.auctionItem);
            },
            controller: function ($scope) {

                    console.log($scope.auctionItem);

                }
            };
        });

在一个名为items.html

的视图中使用以下HTML标记

    <div class="col-sm-6 col-md-4" ng-repeat="item in items">

        <div auction-item-card data-auction-item="item" ></div>

    </div>

以下HTML标记只是名为itemDetails.html

的视图

<div class="col-sm-6 col-md-4">
        <div  auction-item-card data-auction-item="item"></div>
    </div>

当指令在ng-repeat中时，它完全正常。但是，当指令在外部并且视图的控制器在指令内设置项值时，$ scope.auctionItem始终是未定义的。

有人可以说明指令何时在ng-repeater之外？

为了增加清晰度，这里是项目视图的控制器：

var auctionItemsController = function ($scope, $location, $filter, $window,
        $timeout, $routeParams, authService, auctionService, categoryService, productService) {
        var auctionId = ($routeParams.auctionId) ? parseInt($routeParams.auctionId) : 0, timer;

        $scope.items = [];

        function init() {
                getItems();
        }


        function getItems()
        {
            productService.getProducts(auctionId, $scope.pageIndex, $scope.itemsPerPage).then(function (data) {
                $scope.items = data.results;

            });
        }

        init();

    };

这是项目细节控制器：

var itemController = function ($scope, $routeParams,$location, $filter, $window,
        $timeout, authService, productService) {

        var itemId = ($routeParams.itemid) ? parseInt($routeParams.itemid) : 0;


        function init() {
           // $scope.item = {};
            productService.getProductById(itemId).then(function(item) {
                $scope.item = item;
            });
        };
        init();
    };

Answer 1

在第二个示例中，item未定义。它仅在ng-repeat（item in items）中定义。

Answer 2

O.k。这是问题所在。当指令在ng-repeat内部时，调用控制器函数时，angular已经完成了绑定，因此设置了$ scope变量。当没有发生的ng-repeat之外，因此任何尝试访问属性上定义的范围变量的任何人都可能返回一个未定义的，因为我的变量在异步调用中。

获取我拍卖品的imageUrl的解决方案是修改ng-style调用的函数：

$scope.auctionItemImage = function(url)
                {

                    return {
                        background: 'url(' + url + ')',
                        width: '100px',
                        height: '100px',
                        backgroundSize: 'cover',
                        margin: '0 auto'
                }
                };

然后在我的模板中修改此行：对此：

我希望这可以帮助其他想在各种情况下使用其指令的人。

如何在内部和外部访问AngularJS指令属性在ng-repeat之外？

2 个答案: