AngularJS : Update directive scope after successful HTTP request

Question

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 ?

please, share whole part js code, where you request the data — Rodion
– Rodion, Commented Jan 18, 2015 at 8:47
But as i see - it is another scope - you have 2 different scopes - one for directive and another in controller. — Rodion
– Rodion, Commented Jan 18, 2015 at 12:52
yes , you are right so i want to update directive scope from controller.Is it possible ? can we use watch in directive to get the updated value of msg & type ? — Strangera
– Strangera, Commented Jan 18, 2015 at 14:08

Omri Aharon · Accepted Answer · 2015-01-18 12:27:40Z

1

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.

answered Jan 18, 2015 at 12:27

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

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

Comments

Strangera · Accepted Answer · 2015-01-18 15:43:50Z

0

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);  
          }
         }})

answered Jan 18, 2015 at 15:43

Strangera

511 silver badge6 bronze badges

Comments

rob2universe · Accepted Answer · 2015-12-23 10:07:01Z

0

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);
  });
}

answered Dec 23, 2015 at 10:07

rob2universe

7,64844 silver badges59 bronze badges

Collectives™ on Stack Overflow

AngularJS : Update directive scope after successful HTTP request

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related