Question

我正在尝试使用指令在ng-repeat中设置一个类。

我需要将参数传递给此指令：wineQty

如果我使用scope: { wineQty: '=' }这可行，但$ scope.bullet1Color在我的html中未定义，因此不会影响我想要的类。

如果我使用scope: '@'，我会收到正确的课程，但我无法指定wineQty

有没有办法将这两种语法结合起来？这样我就可以访问范围并传递一个参数？

我已经尝试{ wineQty: '@' }，但遗憾地没有运气。

这是我的指示

angular.module('myApp').directive('wineQtyBullets', function () {
        return {
            restrict: 'A',
            scope: { wineQty: '=', totalBullets: '=', numRedBullets: '=', numOrangeBullets: '@', bullet1Color: '@' },
            link: function (scope, element, attrs) {
                // defaults
                var defaultNumRedBullets = 1;
                var defaultNumOrangeBullets = 2;
                var defaultTotalBullets = 12;
                var defaultWineQty = 0;

                // set values from attributes
                var numRedBullets = scope.numRedBullets ? scope.numRedBullets : defaultNumRedBullets;
                var numOrangeBullets = scope.numOrangeBullets ? scope.numOrangeBullets : defaultNumOrangeBullets;
                var totalBullets = scope.totalBullets ? scope.totalBullets : defaultTotalBullets;
                var wineQty = scope.wineQty ? scope.wineQty : defaultWineQty;


                for (var currentBullet = 1; currentBullet <= totalBullets; currentBullet++) {

                    var bulletColorClass = 'bg-grey';

                    if (currentBullet <= wineQty) {
                        if (currentBullet <= numRedBullets) {
                            bulletColorClass = 'bg-red';
                        }
                        else if (currentBullet <= (numOrangeBullets + numRedBullets)) {
                            bulletColorClass = 'bg-orange';
                        }
                        else {
                            bulletColorClass = 'bg-green';
                        }
                    }


                    scope["bullet" + currentBullet + "Color"] = bulletColorClass;

                }
                console.log(scope.bullet1Color);

            }
        };
    }
);

这是我的HTML

<div class="bullets pull-left ml15 mt6" wine-qty="wine.owned_qty" wine-qty-bullets>
            <ul>
                <li class="bullet"
                    ng-class="bullet1Color"></li>
</ul>
</div>

Answer 1

我设法通过将scope更改为true并通过attrs

访问参数来解决问题

如果这可以帮助任何人这里的指令：

angular.module('myApp').directive('wineQtyBullets', function () {
        return {
            restrict: 'A',
            scope: true,
            link: function (scope, element, attrs) {

                var options = { };
                angular.forEach([
                    'numRedBullets',
                    'numOrangeBullets',
                    'totalBullets',
                    'wineQty'
                ], function (key) {
                    if (angular.isDefined(attrs[key]))
                        options[key] = attrs[key];
                });

                // defaults
                var defaultNumRedBullets = 1;
                var defaultNumOrangeBullets = 1;
                var defaultTotalBullets = 12;
                var defaultWineQty = 0;


                // set values from attributes
                var numRedBullets = parseInt(options.numRedBullets) ? parseInt(options.numRedBullets) : defaultNumRedBullets;
                var numOrangeBullets = parseInt(options.numOrangeBullets) ? parseInt(options.numOrangeBullets) : defaultNumOrangeBullets;
                var totalBullets = parseInt(options.totalBullets) ? parseInt(options.totalBullets) : defaultTotalBullets;
                var wineQty = parseInt(options.wineQty) ? parseInt(options.wineQty) : defaultWineQty;


                for (var currentBullet = 1; currentBullet <= totalBullets; currentBullet++) {

                    var bulletColorClass = 'bg-grey';

                    if (currentBullet <= wineQty) {
                        if (wineQty <= numRedBullets) {
                            bulletColorClass = 'bg-red';
                        }
                        else if (wineQty <= (numOrangeBullets + numRedBullets)) {
                            bulletColorClass = 'bg-orange';
                        }
                        else {
                            bulletColorClass = 'bg-green';
                        }
                    }


                    scope["bullet" + currentBullet + "Color"] = bulletColorClass;

                }

            }
        };
    });

Answer 2

使用＆＃34; =＆＃34;意味着双向数据绑定，它绝对没问题。

问题可能是您的link函数在最开始时只执行一次，此时您的属性值可能尚未分配（可能是由某些AJAX调用引起的）

我建议您将所有link函数包装到scope.$watch函数中。像：

        link: function (scope, element, attrs) {
            scope.$watch(function() {
                return { 
                    wineQty: scope.wineQty, 
                    totalBullets: scope.totalBullets, 
                    numRedBullets: scope.numRedBullets, 
                    numOrangeBullets: scope.numOrangeBullets, 
                    bullet1Color: scope.bullet1Color 
                }
            }, function() {
                // Your original code here.
            })
        }

如果您的指令获得了新的属性值，那么您的最终结果将自动更新。

将范围和参数传递给指令 - AngularJS

2 个答案: