CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scope
Strangera
Strangera

Reputation: 51

AngularJS : Update directive scope after successful HTTP request

I am creating a directive to show success/failure message with slidedown effect depending upon response from http request in controller function.Below is the basic implementation.

<slidemsg msg="rmsg" type="rtype"></slidemsg>

My Directive :

app.directive('slidemsg',function(){
       return {restrict : 'EA',
              scope:{msg:'=',type:'='},
              templateUrl:'views/slideMsg.html',       
              controller:function($scope){
               console.log($scope.msg);
               console.log($scope.type);
             }}})

Http Request :

app.controller('empController',function($scope,employeeService,$window,$timeout){ 
  $scope.deleteUser=function(id)
 {
   var deleteUser = $window.confirm('Are you absolutely sure you want to delete?'); 
  if (deleteUser) { 
        employeeService.deleteEmployee(id).success(function(response){
       if(response.success)
        {   console.log('Deleted');
            $scope.rmsg="Successfully Deleted";
            $scope.rtype=true; 
         } 
}
 }});

When my page loads first time directive automatically gets called loads template and consoles rmsg & rtype as undefined.But after successful http request when i set rmsg and rtype in success function , directive doesn't get called neither consoles anything written in it.I also tried using $apply but it throws error [$rootScope:inprog]. Am i doing it the right way ?

Upvotes: 1

Views: 1005

Answers (3)

rob2universe
rob2universe

Reputation: 7583

The controller code is only executed during initialization. If you want code to be executed every time the directive's data changes (e.g. via the bidirectional data binding) then you can surround the code with a watch.

In your example:

controller:function($scope){
  $scope.$watch('msg', function(newValue, oldValue) {
    console.log($scope.msg);
  });
}

Upvotes: 0

Strangera
Strangera

Reputation: 51

Well at last using watch solved my problem . But still i didn't understand why angularjs didn't updated my directive scope from controller even after using two way binding. Below is the updated code .

app.directive('slidemsg',function(){
   return {restrict : 'EA',
          scope:{msg:'=',type:'='},
          templateUrl:'views/slideMsg.html',
          link:function(scope, element, attrs)
          {
           scope.$watch('msg',function(newmsgvalue,oldmsgvalue){},true);
           scope.$watch('type',function(newtypevalue,oldtypevalue){},true);  
          }
         }})

Upvotes: 0

Omri Aharon
Omri Aharon

Reputation: 17064

The code should work.

Your console.logs should not, because they are called once when the directive initializes. So, like you said, at first the parameters are undefined and that's what you see in the console.

When you set your variables after the successful response, angular knows to update the directive. So if you have, for instance, a <div ng-if="rtype">Test</div> then it will show correctly. But consoles will not get recalled in your controller declaration.

Upvotes: 1

Related Questions