CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
iJade
iJade

Reputation: 23791

Access $scope variable inside directive template and update controller $scope.variable

I have create a simple directive with an input element and span. Using the directive I created two custom elements with isolate scope. Now, I am trying to get the sum of the data entered in the input element of the directive. But really can't figure out how to do that. Here is the my controller and directive :

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

I'm looking to sum up data1 of all directives elements and update $scope.total. Here is the HTML code:

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

Here is a DEMO

Upvotes: 8

Views: 34825

Answers (3)

Divya MV
Divya MV

Reputation: 2053

Total: <span>{{a+b}}</span> this would also work in the html without using a $watch or function from the controller

Upvotes: 3

Pankaj Parkar
Pankaj Parkar

Reputation: 136134

Here is you can do with $watch

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

Directive change ng-model="data1" to ng-model="data"

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

Working Fiddle

Upvotes: 0

Joe Enzminger
Joe Enzminger

Reputation: 11190

Here is a working fiddle

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

Upvotes: 9

Related Questions