anothe 함수가 Angular에서 호출 될 때마다 함수 호출

Question

다른 함수가 Angular Js에서 호출 될 때마다 함수를 호출하려고합니다.

아래 코드에서 checkAll() 또는 uncheckAll이 호출 될 때마다 checkTotal() 함수도 호출되기를 바랍니다. 비록 내가 정상적인 js 방법으로 그것을 추가했지만, 그것은 작동하지 않습니다. 클릭 동작에서 직접 호출 할 때 작동합니다.

var app = angular.module("app", ["checklist-model"]); 

app.controller('Ctrl', function($scope) { 
$scope.roles = [ 
    {id: 1, text: 'WebDesign' , cost: 10}, 
    {id: 2, text: 'Photoshop' , cost: 20}, 
    {id: 3, text: 'Design' , cost: 30}, 
    {id: 4, text: 'Branding' , cost: 15} 
    ]; 
    $scope.user = { 
    roles: [2, 4] 
    }; 

    console.log($scope.roles); 


    $scope.checkAll = function() { 
    $scope.user.roles = $scope.roles.map(function(item) { return item.id; }); 
    checkTotal()  
    }; 
    $scope.uncheckAll = function() { 
    $scope.user.roles = []; 
    checkTotal(); 
    }; 
    $scope.checkFirst = function() { 
    $scope.user.roles.splice(0, $scope.user.roles.length); 
    $scope.user.roles.push(1); 
    checkTotal(); 

    }; 

$scope.checkTotal = function() { 
    $scope.user.total = $scope.roles.map(function(item) { return item.cost; }); 


    var arr = $scope.user.total; 
    var total=0; 
    for(var i in arr) { total += arr[i]; }  
    $scope.user.caltotal = total;  

    }; 


}); 

내 HTML을

<div ng-app="app" ng-controller="Ctrl"> 
    <label ng-repeat="role in roles"> 
    <input type="checkbox" checklist-model="user.roles" checklist-value="role.id"> {{role.text}} | {{role.cost}} 
    </label> 
    <br> 
    <button ng-click="checkAll()">check all</button> 
    <button ng-click="uncheckAll()">uncheck all</button> 
    <button ng-click="checkFirst()">check first</button> 
    <button ng-click="checkTotal()">Total</button> 
    <br><br> 
    user.roles {{ user.roles | json }} <br> 
    Total: {{ user.caltotal }} 
</div> 

나는 모든이 같은 $ 범위 개체를 추가 in a Fiddle.

Answer 1

시도를 구현 :

이

$scope.checkTotal();