So weisen Sie einer Scope-Variablen einen Wert aus einer Controller-Funktion zu

Question

Mein Ziel ist es, eine Seite anzuzeigen, während Sie das Guthaben im Hintergrund berechnen und dieses Guthaben anzeigen. Ich dachte, ich würde versuchen, das Gleichgewicht in seine eigene Richtlinie zu isolieren. Also habe ich die folgende Anweisung erstellt:

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

mit diesem sehr einfachen html:

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

Und in meiner Form habe ich die folgende :

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

und die Steuerung Methode getAccountBalance des Formulars ist die folgende:

$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; } 
 
      };

Also, das ist alles gut, außer der Tatsache, dass meine Richtlinie variable Balance Undefiniert und nichts wird angezeigt, obwohl ich bei der Verfolgung den Wert totalBalance berechnet habe.

Was sollte ich ändern, um den Wert aus der Controller-Funktion zurück in die Direktive und global zu bekommen, das gewünschte Verhalten zu haben (z. B. Form angezeigt, während Balance noch berechnet wird)?

Answer 1

Ihre Anweisung hat einen isolierten Bereich und die Balance-Variable ist von außen nicht sichtbar. Versuchen Sie, die Balance als Rahmen Variable der Richtlinie

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

Dann in Ihrem HTML-Template Link, um die Richtlinie Balance Variable auf den Steuerungsbereich Balance hinzufügen Attribut Hinzufügen balance="balance" wie:

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

Siehe Mastering the scope of directives

Answer 2

Ich habe dieses Problem inzwischen auch gelöst. Ich habe meine Richtlinie ganz einfach:

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

 
})();

Und in der Hauptsteuerung ich am Ende der Kontobelastungsmethode hinzugefügt:

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

So , jetzt werden meine Kontoinformationen geladen, ich sehe die Nachricht 'Calculating' und dann den balanc Es kommt gut.