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

I am trying to ng-repeat a custom directive, which has an attribute that should change over the iteration.

我试图重复一个自定义指令,它有一个应该在迭代中改变的属性。

This is my html:

这是我的HTML:

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

This is my controller:

这是我的控制器:

(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: '=',
                }
            };
        }
);
})();

And this is my template:

这是我的模板:

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

What happens is that the template can not resolve the bitcoinLabel variable. I have tried specifying a constant value and the template works. My conclusion is that I am not correctly specifying the bitcoin_label attribute in the html section.I have also tried using {{bitcoin_address}}, but angularjs complains about that.

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

I have also tried with the following html code:

我也尝试过以下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>

It does not work either, but at least it shows the {{bitcoin_label}} value.

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

4 个解决方案

#1

The problem seems pretty simple. Instead of

问题似乎很简单。代替

controller.wallets.push(curWallet.label);

you should push corresponding $scope[curWallet.label] object:

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

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

Because curWallet.label is just a string so in the first case wallets ends up as array of stings. However you need wallets to be an array of objects, each having address, label, balance properties.

因为curWallet.label只是一个字符串,所以在第一种情况下,钱包最终成为一串蜇。但是,您需要将钱包作为一个对象数组,每个对象都具有地址,标签,平衡属性。

#2

You have some problems with your logic. You're putting wallet labels into .wallets, then iterating over the labels, and then in your bitcoinAddress template you're trying to read .address property of the label string (not from the object where you saved it). Why not simplify the whole thing to this script:

你的逻辑有些问题。你将钱包标签放入.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: '=',
        }
    };
})

this directive template:

这个指令模板:

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

and this body template:

和这个身体模板:

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

#3

Both bitcoinAddress and ng-repeat directives creating scopes on the same element could cause some conflict (isolate scope in the bitcoinAddress case).

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

Try adjusting your html structure slightly:

尝试稍微调整您的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>

#4

Why not use $scope.wallets instead of this.wallets? Also in your getWallets function. After that try

为什么不使用$ 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>

But if your wallets is an array of non-object like array of string or integer, use

但是如果你的钱包是一个非对象数组,如字符串或整数数组,请使用

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

#1