コントローラの関数からスコープ変数に値を割り当てる方法

Question

私の目的は、バックグラウンドで残高を計算しながらページを表示し、その残高を表示することです。私はバランスを自分の指示に分離しようと思っていました。この非常に単純なHTMLで

app.directive('smBalanceInfo', function() { 
 
     return { 
 
      restrict: 'A', 
 
      //transclude: true, 
 
      //replace: true, 
 
      
 
      scope: { 
 
       title: '@', 
 

 
       calculateBalance: '&', 
 

 
      }, 
 
      controller: ['$scope', function ($scope) { 
 
       $scope.balance = 0;    
 

 
       $scope.calculated = false; 
 

 
       var getBalance = function() { 
 

 
        $scope.balance = $scope.calculateBalance(); 
 
        $scope.calculated = true; 
 
       }; 
 

 
       getBalance(); 
 
      }],

：：だから、私は次のディレクティブを作成しました

{{title}}: <span ng-hide="calculated">Calculating...</span> 
 
<span ng-show="calculated" ng-class="{'negative-amount': balance < 0}">{{balance| currency:""}}</span>

そして、私の形で、私は次のように置きます：

<div class="col-md-4" data-sm:balance-info title="@Labels.totalDueForAllInvoices" calculate-balance="getAccountBalance()"></div>      

そしてgetAccountBalanceには、次のされて、フォームのコントローラメソッド：

$scope.getAccountBalance = function() { 
 
       var totalBalance = 0; 
 
       if (!$scope.isNew) { 
 
        accountsService.getAccountBalance($scope.invoicesObject.accountNameHash).then(function (data) { 
 
         totalBalance = data.balance; 
 

 
         return totalBalance; 
 
        }); 
 
       } 
 
       else { return totalBalance; } 
 
      };

だから、これはすべて私のディレクティブ変数のバランスであるという事実を除いて良いです私がトレースしても、totalBalanceの計算値が表示されますが、何も表示されません。

コントローラーの機能の値を指令に戻し、よりグローバルに取得できるようにするには、上記で変更する必要があります（たとえば、残高が計算されている間にフォームが表示されます）。

Answer 1

ディレクティブには独立したスコープがあり、バランス変数はその外側からは見えません。

<div class="col-md-4" data-sm:balance-info title="@Labels.totalDueForAllInvoices" balance="balance" calculate-balance="getAccountBalance()"></div> 

Mastering the scope of directives

Answer 2

を参照してください。そして、あなたのHTMLテンプレートに似た属性 balance="balance"を追加するコントローラスコープ残高に指示バランス変数をリンクディレクティブ

app.directive('smBalanceInfo', function() { 
     return { 
      restrict: 'A', 
      //transclude: true, 
      //replace: true, 

      scope: { 
       title: '@', 
       balance:'=', 
       calculateBalance: '&', 

      }, 
      controller: ['$scope', function ($scope) { 
       $scope.balance = 0;    

       $scope.calculated = false; 

       var getBalance = function() { 

        $scope.balance = $scope.calculateBalance(); 
        $scope.calculated = true; 
       }; 

       getBalance(); 
      }], 

のスコープ変数としてバランスを追加しよう

私はその間にその問題を解決しました。私は非常に単純な私のディレクティブ製：

(function() { 
 
    'use strict'; 
 

 
    var app = angular.module('sysMgrApp'); 
 

 
    app.directive('smBalanceInfo', function() { 
 
     return { 
 
      restrict: 'A', 
 
      //transclude: true, 
 
      //replace: true, 
 
      
 
      scope: { 
 
       title: '@', 
 
       calculated: '=', 
 
       balance: '=', 
 

 
      }, 
 
      
 
      templateUrl: 'app/templates/smBalanceInfo' 
 
     }; 
 
    }); 
 

 
})();

をメインコントローラに私が口座ローディング方式の末尾に追加：だから

  $rootScope.$broadcast('sm:focus'); 
 
        $rootScope.$broadcast('accounts:accountLoaded'); 
 
       }); 
 

 
      }; 
 

 
      var getAccountBalance = function() { 
 
       var totalBalance = 0; 
 
       if (!$scope.isNew) { 
 
        accountsService.getAccountBalance($scope.currentAccount.acctNameHash).then(function (data) { 
 
         $scope.currentAccount.totalBalance = data.balance; 
 
         $scope.balanceCalculated = true; 
 
         return totalBalance; 
 
        }); 
 
       } 
 
       else { 
 
        $scope.balanceCalculated = true; 
 
        return totalBalance; 
 
       } 
 
      }; 
 

 
      $scope.$on('accounts:accountLoaded', function (event) { 
 
       getAccountBalance(); 
 
      });

今、私のアカウント情報がロードされ、私は 'Calculating'メッセージを見てからbalanc eはうまくいく。