CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Asif Alamgir
Asif Alamgir

Reputation: 1462

angularjs directive to do arithmetic

I am very new to angularjs and i am not sure if this is the right approact I am trying do similar math so I was thinking of putting it in directive

myApp.directive('getDistance',function(Auth){
    var R = 6371;


    return {
        restrict: 'AE',
        template: '{{distance}}',
        scope: {
            value: '=value',
            maxValue: '=max-value'
        },
        link : function(scope, element, attr) {
            $scope.$apply(function(){
               $scope.distance = scope.maxValue - scope.value;
            });

        }
    };

});

Same directive will be used in the same page multiple times and I think every directive will use the same distance. How can i fix this or what will be a better approach?

Upvotes: 1

Views: 174

Answers (1)

dfsq
dfsq

Reputation: 193311

There are several issues with your directive. You can fix them and also improve code at the same time.

First of all maxValue: '=max-value' is not correct isolated scope property definition. You must use camelCase for property/attribute names: maxValue: 'maxValue'.

Having fixed that, you can then remove names on the right all together and use = symbol, since scope names are the same at corresponding attributes.

And finally in link function you referred wrong scope variable $scope. Final directive would look like this:

myApp.directive('getDistance', function(Auth) {
    var R = 6371;

    return {
        restrict: 'AE',
        template: '{{distance}}',
        scope: {
            value: '=',
            maxValue: '='
        },
        link: function(scope, element, attr) {
            scope.distance = scope.maxValue - scope.value;
        }
    };    
});

Demo: http://plnkr.co/edit/3pbe9Z3e40JT5far4ijK?p=preview

Upvotes: 2

Related Questions