Perform Default Action for each Function in a Directive

Question

I've created some directives which have some functions, something like this:

myCtrl.directive('myDirective', function () {
    return {
        restrict: 'E',
        scope: {
            'something': '='
        },
        link: function (scope, el, attr) { 
             function func1(){
                 //some stuff
                 scope.$apply();
             }
             function func2(){
                 //some stuff
                 scope.$apply();
             }
             function func3(){
                 //some stuff
                 scope.$apply();
             }
             //...
        }
    }
});

I have to call scope.$apply() in all the functions to update the view. In addition I don't want to define them in the controller. I don't know if there is a trick to avoid this kind of pattern. It is working but I think it's not a good solution.

UPDATE

There are more than 10 directives which we've created for some shapes, e.g. rectangle, circle, square etc. In these functions, which I called $apply in them, some methods like drag and scale are implemented. So I need to call $apply to modify changes in model and consequently the view will be updated. I don't know how can I make them able to aware scope automatically unless I write about 100 functions in a controller! In addition, I'm using some 3rd party libraries like d3.js. Some event like clicked are bounded for calling these functions.

Your functions are attached to the `scope`, right? I.e. `scope.func1 = function() {};`? — sp00m, Sep 03 '15 at 15:46
@Gnarlywhale I'm not allowed to do that because there are a dozen of directives which I need to declare the controller in them! — Saman Gholami, Sep 03 '15 at 17:45
What do you do with these functions? In your snippet it looks like they have private visibility (are not accessible from anywhere else). Can you post more of your code please? — Pedro Affonso, Sep 03 '15 at 20:30
What exactly is your question? And what are these functions supposed to be used for? Without the context it's impossible to say whether it's correct to use $apply or not. — Tahsis Claus, Sep 03 '15 at 20:43
In theory, you could have the directive trigger for a general action (such as a drag event), pick one of your functions to call, then calls $apply after your function has finished. It's hard to say without seeing the full code of the directive. — Tahsis Claus, Sep 03 '15 at 21:09
@TahsisClaus could you make a sample for what you said please? — Saman Gholami, Sep 03 '15 at 21:29
You could have something like function pointers (sorry I come from C). You have your func1 func2 etc.. and `function execFunc(action) { action(); scope.$apply() }` to which you pass the correct function — cfz42, Sep 07 '15 at 17:22

score 3 · Accepted Answer · edited May 23 '17 at 12:22

3

The real truth is that you need to call $scope.$apply() whenever you're changing something outside angular digest cycle. Angular detects the changes by dirty checking during the digest cycle.

$timeout is also doing $apply ($rootScope.$apply())

Check Angular source code.

What I can suggest is create helper function which will handle that. Example:

var ngAware = function (fnCallback) {
    return function () {
        var result = fnCallback.apply(this, arguments);    
        $scope.$apply();
        return result;
    };   
};   

// usage
function func1 () {
    // impl...
}
var ngFunc1 = ngAware(func1);
// or
var func2 = ngAware(function func2 () {
    // impl...
});

edited May 23 '17 at 12:22

Community

1
1

answered Sep 07 '15 at 17:25

S.Klechkovski

4,005
16
27

I think your solution is really near to what I need, the only difference is the functions that I've mentioned are some events, e.g. click or drag events. – Saman Gholami Sep 07 '15 at 17:58
You can use them as regular functions. Example: $('stg').click(func2); or $('stg').click(ngAware(function(event) { // impl.. })); – S.Klechkovski Sep 07 '15 at 18:16
Could you make a sample on fiddle or somewhere else please? – Saman Gholami Sep 08 '15 at 20:46
Yes, here is one simple example: https://jsfiddle.net/69mub4nz/ Here instead of $scope.$apply() we are showing additional alert. – S.Klechkovski Sep 08 '15 at 21:27

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

Sure you need `apply()`?

apply() is used when integrating 3rd party libraries (such as jQuery). In most cases, if you are not hooking up 3rd party javascript libraries, you can avoid $apply() by using the build in binding mechanism

For instance, the following snippet will call func1 using a 3 seconds timeout callback. then, func1 will manipulate the scope variable something and the view will be updated without the need to trigger $apply()

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.value = 'Hello';
});


app.directive('myDirective', function ($timeout) {
    return {
        restrict: 'E',
        template:'<h1>{{something}}</h1>',
        scope: {
            'something': '='
        },
        link: function (scope, el, attr) { 
             function func1(){
                scope.something += ' ' + scope.something;
             }
             
             $timeout(func1, 3000);
        }
    }
});

html

<body ng-controller="MainCtrl">
   <my-directive something="value"></my-directive>
</body>

http://plnkr.co/edit/42VYs0W2BC5mjpaVWQg3?p=preview

perhaps if you explain more about your use case i could expand my answer to your specific needs

Using $apply in directives isn't that hacky as its needed for interfacing anything outside of angular (so DOM and browser events too). Many of the ng directives use $apply. — Tahsis Claus, Sep 03 '15 at 20:43

gaurav bhavsar · Answer 3 · 2015-09-04T12:02:03.007

wraps the function within $scope.$apply()

check this :

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    $scope.value = 'Hello';
});


app.directive('myDirective', function ($timeout) {
    return {
        restrict: 'E',
        template:'<h1>{{something}}</h1>',
        scope: {
            'something': '='
        },
        link: function (scope, el, attr) { 
            scope.$apply(function(){

                function func1(){
                    //some stuff
                }

                function func2(){
                    //some stuff
                }

                function func3(){
                    //some stuff
                }
            })
        }
    }
});

score 0 · Answer 4 · answered Sep 08 '15 at 16:04

If you have common functionality in you directives (circle, square, etc) you should group it. By example, we could have a directive to drag

.directive('ngDraggable', [function () {

    return {
        link: function ($scope) {

            var stopHandler = function () {

                $scope.apply(function () {
                    // Code to handler the end of the dag event

                    // Notify the other directive.
                    $scope.$emit('dragStopped', data);
                });
            };

            // Initialization of the drag functionality.
        }
    }
}])

You can used as

<div ng-circle ng-draggable></div>

So, you earn three thing. First, the circle directive can do changes in its scope without call to $apply, because $emit already is in the digest cycle. Second, you only use $apply where is necessary. And third, you improve the performance by use $apply in scopes most small and with less children.

You could merge this answer with the answer of @sasko_dh

Maybe the Observer Pattern could be you useful.

Perform Default Action for each Function in a Directive

4 Answers4

Sure you need apply()?

http://plnkr.co/edit/42VYs0W2BC5mjpaVWQg3?p=preview

Sure you need `apply()`?