Access $ zmienna zakresu wewnątrz szablonu dyrektywy i kontrolera aktualizacji $ scope.variable

Question

Utworzono prostą dyrektywę z elementem wejściowym i zakresem. Używając dyrektywy stworzyłem dwa niestandardowe elementy z zakresem izolatu. Teraz próbuję uzyskać sumę danych wprowadzonych do elementu wejściowego dyrektywy. Ale naprawdę nie mogę wymyślić, jak to zrobić. Oto mój kontroler i dyrektywy:

angular.module('mapp',[]) 

.controller('ctrl',['$scope',function($scope){ 
    $scope.total = 0; 
}]) 

.directive('customElement',function(){ 
    return { 
     restrict: 'E', 
     scope:{ 
      data: '=info' 
     }, 
     template: '<input type="text" ng-model="data1">\ 
        <span>{{data1}}</span>' 
    } 
}); 

szukam podsumować data1 wszystkich elementów dyrektyw i aktualizować $scope.total. Oto kod HTML:

<div ng-app="mapp"> 
    <div ng-controller="ctrl"> 

     <custom-element info="a"></custom-element> 
     <custom-element info="b"></custom-element> 
     <br/> 
     <br/> Total: <span>{{total}}</span> 
    </div> 
</div> 

Oto DEMO

Answer 1

Here jest skrzypce roboczego

angular.module('mapp', []) 

    .controller('ctrl', ['$scope', function ($scope) { 
    $scope.total = 0; 
    $scope.a = 0; 
    $scope.b = 0; 
    $scope.$watchCollection('[a,b]', function() { 
     console.log('watch'); 
     $scope.total = $scope.a + $scope.b; 
    }); 
}]) 

    .directive('customElement', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      data: '=info' 
     }, 
     template: '<input type="number" ng-model="data">\ 
        <span>{{data}}</span>' 
    } 
}); 

A version without $watch

A version with ng-repeat

Answer 2

Oto można zrobić z $ obejrzyj

Controller

.controller('ctrl',['$scope',function($scope){ 
    $scope.test = {}; 
    $scope.test.a = 0; 
    $scope.test.b = 0; 
    $scope.$watch('test',function(newVal,oldVal){ 
     $scope.total = $scope.test.a + $scope.test.b 
    },true) 
    $scope.total = 0; 
}]) 

dyrektywa zmiana ng-model="data1" do ng-model="data"

template: '<input type="number" ng-model="data">\ 
        <span>{{data}}</span>' 

Working Fiddle

Answer 3

Total: <span>{{a+b}}</span> byłoby to również pracować w HTML bez używania $watch lub funkcji z kontrolera