Question

我正在尝试重复一个自定义指令，该指令的属性应该在迭代中发生变化。

这是我的HTML：

<div ng-controller="WalletsController as controller">
    <bitcoin-address ng-repeat="bitcoin_label in controller.getWallets()"  bitcoin-label="bitcoin_label"></bitcoin-address>
</div>

这是我的控制者：

(function() {
var app = angular.module('wallets', [ ]);

app.controller(
        "WalletsController",
        function($scope, $http) {
            this.wallets = [];

            var controller = this;

            this.getWallets = function() {
                return controller.wallets;
            };

            $http.get("wallet_addresses").success(
                    function(data) {
                        for (var i = 0; i < data.length; i++) {
                            var curWallet = data[i];
                            $scope[curWallet.label] = {
                                label: curWallet.label,
                                address: curWallet.address,
                                balance: curWallet.balance
                            };
                            controller.wallets.push(curWallet.label);
                        }
                    }
            );
        });

app.directive(
        'bitcoinAddress',
        function() {
            return {
                restrict: 'E',
                templateUrl: '../../resources/html/bitcoin-address.html',
                scope: {
                    bitcoinLabel: '=',
                }
            };
        }
);
})();

这是我的模板：

<div class="col-md-8 dashboardAddressCell dropdown-toggle" data-toggle="dropdown">{{bitcoinLabel.address}}</div>

发生的情况是模板无法解析bitcoinLabel变量。我试过指定一个常量值，模板有效。我的结论是我没有正确指定html部分中的bitcoin_label属性。我也尝试使用{{bitcoin_address}}，但angularjs抱怨这一点。

我也尝试过以下html代码：

<div ng-controller="WalletsController as controller">
        <!-- <tr><th>Indirizzo</th><th>Saldo</th><th></th>-->
        <div ng-repeat="bitcoin_label in controller.getWallets()">
            {{bitcoin_label}}
            <bitcoin-address bitcoin-label="bitcoin_label"></bitcoin-address>
        </div> 
        <bitcoin-address  bitcoin-label="ciccio"></bitcoin-address>
    </div>

它也不起作用，但至少它显示{{bitcoin_label}}值。

Answer 1

您的逻辑存在一些问题。您将钱包标签放入.wallets，然后在标签上进行迭代，然后在bitcoinAddress模板中尝试阅读.address 标签字符串的属性（不是来自保存它的对象）。为什么不简化整个脚本：

.controller("WalletsController", function($scope, $http) {
    $scope.wallets = [];

    $http.get("wallet_addresses").success(function(data) {
        $scope.wallets = data.slice();
   });
})
.directive('bitcoinAddress', function() {
    return {
        restrict: 'E',
        templateUrl: '...',
        scope: {
            wallet: '=',
        }
    };
})

这个指令模板：

<div class="..." ...>{{wallet.address}}</div>

和这个正文模板：

<div ng-controller="WalletsController as controller">
    <bitcoin-address ng-repeat="wallet in wallets" wallet="wallet"></bitcoin-address>
</div>

Answer 2

问题似乎很简单。而不是

controller.wallets.push(curWallet.label);

你应该推送相应的$scope[curWallet.label]对象：

controller.wallets.push($scope[curWallet.label]);

因为curWallet.label只是一个字符串，所以在第一种情况下wallets最终会成为一串叮咬。但是，您需要wallets成为一个对象数组，每个对象都有address，label，balance属性。

Answer 3

在同一元素上创建范围的bitcoinAddress和ng-repeat指令都可能导致一些冲突（在bitcoinAddress情况下隔离范围）。

尝试稍微调整html结构：

<div ng-controller="WalletsController as controller">
    <div ng-repeat="bitcoin_label in controller.getWallets()">
        <bitcoin-address bitcoin-label="bitcoin_label"></bitcoin-address>
    </div>
</div>

Answer 4

为什么不使用$scope.wallets代替this.wallets？也在您的getWallets功能中。之后尝试

<div ng-controller="WalletsController">
  <div ng-repeat="bitcoin_label in wallets">
    <bitcoin-address bitcoin-label="bitcoin_label"></bitcoin-address>
  </div>
</div>

但是如果你的wallets是一个non-object数组的字符串或整数数组，请使用

<div ng-controller="WalletsController">
  <div ng-repeat="bitcoin_label in wallets track by $index">
    <bitcoin-address bitcoin-label="wallets[$index]"></bitcoin-address>
  </div>
</div>

ANgularjs：ng-repeat和嵌套的自定义指令

4 个答案: