CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
jhon dano
jhon dano

Reputation: 658

How can i update a directive $scope from other directive contoller in Angular.js?

I have a diretive with a list of events loading from my service service:

.directive('appointments', [function () {
        return {
            restrict: 'CE',
            scope: {
                ngTemplate: '=',
            },
            controller: ['$scope','calendarService', function ($scope, calendarService) {
               var vm = this;
               vm.events = calendarService.getEvents();
            }],
            controllerAS:'vm',
            link: function (scope, elem, attrs) {
                scope.getTemplateUrl = function () {
                    if (angular.isDefined(scope.ngTemplate))
                        return scope.ngTemplate;
                    else
                    return "/list.directive.html";
                }
            },
            template: '<div ng-include="getTemplateUrl()"></div>'
        }
    }])

Now in another directive i am updating this list, how can i update the list in the first controller?

    .directive('appointmentsUpdate', [function () {
            return {
                restrict: 'CE',
                scope: {
                    ngEventId: '=',
                },
                controller: ['$scope','calendarService', function ($scope, calendarService) {
                   var vm = this;
                   vm.update = calendarService.updateEvent(scope.ngEventId).then(function(res){


   // Here is where the newly created item, should be added to the List (vm.events) from first directive

)
});
                }],
                controllerAS:'vm',
                link: function (scope, elem, attrs) {
                    scope.getTemplateUrl = function () {
                        if (angular.isDefined(scope.ngTemplate))
                            return scope.ngTemplate;
                        else
                        return "/list.directive.html";
                    }
                },
                template: '<div ng-include="getTemplateUrl()"></div>'
            }
        }])

Upvotes: 2

Views: 222

Answers (3)

Sophie
Sophie

Reputation: 2070

Services are singletons, so if you update the list from one place (with your calendarService.updateEvent()), then if you retrieve the data from the service in the other directive, it should be the updated list. You could use a watch to check when the list is updated:

$scope.$watch(() => calendarService.getEvents(), (newValue, oldValue) => {
    // update your scope with the new list
}, true);

Upvotes: 0

Ram_T
Ram_T

Reputation: 8484

We use require property to make communication between directives.

Something like this

return {
    restrict: 'AE',
    require: '^ParentDirective or ^SameLevelDirective'
}

Here is the clear explanation of Driectives That Communicate by ToddMotto

Upvotes: 0

Gaurav Srivastava
Gaurav Srivastava

Reputation: 3232

you can use angular broadcast service for this:

in first directive use this:

 $rootScope.$broadcast('greeting', data_needs_to_be_send);

in other directive listen the event to update its scope:

$scope.$on('greeting', listenGreeting)

  function listenGreeting($event, message){
    alert(['Message received',message].join(' : '));
  }

Upvotes: 1

Related Questions