angularjs directive to do arithmetic

Question

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?

So what exactly is the problem (I can see that your directive can't work in the current form). Is it your issue, to make it work? — dfsq
– dfsq, Commented Nov 17, 2014 at 19:26

dfsq · Accepted Answer · 2014-11-17 19:33:39Z

2

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

answered Nov 17, 2014 at 19:33

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Asif Alamgir Over a year ago

this is exactly what i want, but when i am putting it in it is throwing an error. FYI i am using ionic framework which shouldnt matter though. Error: [$injector:unpr] Unknown provider: getDistanceProvider <- getDistance

dfsq Over a year ago

Are you sure you don't inject getDistance anywhere, in controller for example? You should not.

Asif Alamgir Over a year ago

Thank you so much, yes i was injecting in controller, i thought my view wont have access to the directive if i dont inject in controller.

dfsq Over a year ago

I see, glad you figured it out.

Collectives™ on Stack Overflow

angularjs directive to do arithmetic

1 Answer 1

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

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

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

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related