ANgularjs: ng-repeat и вложенная пользовательская директива

Question

Я пытаюсь выполнить ng-repeat пользовательскую директиву, которая имеет атрибут, который должен измениться по итерации.

Это мой 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. Я попытался указать постоянное значение, и шаблон работает. Я пришел к выводу, что я неправильно указываю атрибут bitcoin_label в разделе html. Я также пытался использовать {{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

Проблема кажется довольно простым.Вместо

controller.wallets.push(curWallet.label); 

Вы должны подтолкнуть соответствующий $scope[curWallet.label] объект:

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

Поскольку curWallet.label это просто строка поэтому в первом случае wallets закончится, как массив укусы. Однако вам нужен wallets как массив объектов, каждый из которых имеет address, label, balance объектов.

Answer 2

Как 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 3

Почему бы не использовать $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> 

Answer 4

У вас есть какие-то проблемы с логикой. Ты ставишь Wallet этикетки в .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>