如何從控制器的功能給範圍變量賦值

Question

我的目標是在計算背景中的平衡並顯示平衡時顯示頁面。我想我會嘗試將平衡分爲自己的指令。所以，我創建了以下指令：

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(); 
 
      }],

這個非常簡單的HTML：

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

您的指令具有隔離範圍，而平衡變量從外部不可見。儘量平衡指令平衡變量添加爲指令的範圍變

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(); 
      }], 

然後在你的HTML模板鏈接到控制範圍餘額增加屬性balance="balance"，如：

<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

我也同時解決了這個問題。我做了我的指示很簡單：

(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(); 
 
      });

所以，現在我的賬戶信息被加載，我看到'計算'信息，然後是平衡e就好了。