ANgularjs: ng-repeat and nested custom directive

Question

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

This is my 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.

I have also tried with the following html code:

<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.

Shouldn't it be controller.wallets.push($scope[curWallet.label]);? — dfsq
– dfsq, Commented Dec 6, 2014 at 10:53
Sorry, what do you mean? I think that part should work. In fact, if I include <bitcoin-address bitcoin-label="ciccio"></bitcoin-address> in the html page and $scope['ciccio'] = {address:'hello'}; in the controller, I can see 'hello'. — fcracker79
– fcracker79, Commented Dec 6, 2014 at 11:03
I mean that your code should be controller.wallets.push($scope[curWallet.label]) not controller.wallets.push(curWallet.label);. — dfsq
– dfsq, Commented Dec 6, 2014 at 11:08
Great it worked! Thank you very much! ... But I did not understand what happened... — fcracker79
– fcracker79, Commented Dec 6, 2014 at 11:18
Ok, ok, got it! You helped me both in solving the problem and clearing me a bit more with custom directive. If you post it as an answer, I will mark it. Thank you again — fcracker79
– fcracker79, Commented Dec 6, 2014 at 11:22

dfsq · Accepted Answer · 2014-12-06 11:32:47Z

1

The problem seems pretty simple. Instead of

controller.wallets.push(curWallet.label);

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

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.

answered Dec 6, 2014 at 11:32

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hon2a · Accepted Answer · 2014-12-06 11:11:09Z

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:

.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>

user2943490 · Accepted Answer · 2014-12-06 10:43:17Z

0

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

Try adjusting your html structure slightly:

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

answered Dec 6, 2014 at 10:43

user2943490

6,9402 gold badges24 silver badges39 bronze badges

1 Comment

fcracker79 Over a year ago

Thanks for the answer. That was my original html code, but it does not work either...

Andi N. Dirgantara · Accepted Answer · 2014-12-06 11:02:18Z

0

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

<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>

answered Dec 6, 2014 at 11:02

Andi N. Dirgantara

2,05114 silver badges20 bronze badges

Collectives™ on Stack Overflow

ANgularjs: ng-repeat and nested custom directive

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related