I am using carousel () in an ionic project. This is a custom angularjs directive. I am using 2 carousels in one screen. Now, what I want is that on change of 1st carousel the second carousel should also get updated with the new value. And to do this the 2nd carousel custom directive has to be reloaded/refreshed. Is there a way to refresh/reload custom directives in angularjs?

I am using carousel (https://market.ionic.io/plugins/morph-carousel) in an ionic project. This is a custom angularjs directive. I am using 2 carousels in one screen. Now, what I want is that on change of 1st carousel the second carousel should also get updated with the new value. And to do this the 2nd carousel custom directive has to be reloaded/refreshed. Is there a way to refresh/reload custom directives in angularjs?

• javascript
• angularjs
• angularjs-directive
• ionic-framework
• angular-directive

Share Improve this question Follow asked Apr 2, 2016 at 19:06 anuj trehananuj trehan 12522 gold badges44 silver badges1111 bronze badges 1

• may be in the link function of the second directive you can use $scope.watch to track the changes of the first directive model variables? – Abdelrhman Adel Commented Apr 2, 2016 at 19:11

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Add a watcher in first directive in link function.

scope.$watch('thingToWatchForRefershing', function (newValue, oldValue) {
    if (!newValue || angular.equals(newValue, oldValue)) {
        return;
    }
    scope.$emit('somethingChangedInFirstDirective', dataToBePassed);
});

Now, in your second directive, have a render function which when called will refresh the models and views and also add a listener.

link: function () {
    scope.render = function () {
        // all logic goes here
    };
    scope.$on('somethingChangedInFirstDirective', function (ev, data) {
        // render everything again i.e. reload the directive
        scope.render();
    });
    // first time rendering
    scope.render();
}

Hope it helps :)

Update:

1. Pass an attribute to the first directive only. eg: <custom-carousel data-is-to-be-watched="isToBeWatched" /> and in your controller set: $scope.isToBeWatched = true. Also, for the second directive use: <custom-carousel data-is-tobe-reloaded="isToBeReloaded" /> and in the same controller initialize: $scope.isToBeReloaded = false;
2. If its an isolated directive, having its own scope, then: have this scope:{isToBeWatched: '=?', isToBeReloaded: '=?'}, link: function (...) {...}
3. Once the directive is loaded, check if (scope.isToBeWatched), is true, it means first directive is loaded/changed since we passed the attr only in first directive. Now, emit an event, which will be listened in the controller. In the listener do: $scope.isToBeReloaded = true; which in turn will set the variable isToBeReloaded in the second directive's scope, since we passed in 2nd directive.
4. Have a watcher for isToBeReloaded and reload the render fn as I mentioned earlier.

Rough code:

Controller:

$scope.isToBeWatched = true;
$scope.isToBeReloaded = false;

$scope.$on('somethingChangedInFirstDirective', function () {
    $scope.isToBeReloaded = true;
});

Directive:

scope: {
isToBeWatched: '=?',
isToBeReloaded: '=?'
},
 link: function (scope) {
 scope.render = function () {
    if (scope.isToBeWatched) {
        scope.$emit('somethingChangedInFirstDirective');
    }
 };
 scope.render();

scope.$watch('isToBeReloaded', function (newValue, oldValue) {
    if (!newValue || angular.equals(newValue, oldValue)) 
         return; 
    scope.render();
})

}