Angularjs run directive after success of $http

Question

I am making a nav using custom directive and when some add/remove anything from that nav I wanted to reflect changes on that nav . If that nav comes from scope then I can update scope but as nav comes from directive so I don't know how to call that directive on $http success.

Here is my directive :

<nav_toolbar uuid=\"pk\" my-method=\"get_navs\"></nav_toolbar>

Here you can see I am using some attributes too in directive which helps me to fetch exact nav options.

Directive code :

app.directive('synapseToolbar', function() {
   var controller = ['$scope', '$element', '$attrs', '$http', '$compile','Scopes',
        function ($scope, $element, $attrs, $http, $compile, Scopes) {
        var uuid = $scope.uuid
        // my $http request comes here 
        // on $http success i'll set this below scope    
            $scope.synapse_toolbar_icons = a object
      }];
  return {
    restrict: 'EA',
    scope: {
      uuid: '=',
      method: '&myMethod',
    },
    controller: controller,
    link: function (scope, element, attrs) {
            var click_fn = scope.method();
             $(element).click(function(e, rowid) {
              click_fn(scope.link_source, scope.link_fact_type);
            });
          },
    template: '<div ng-show="synapse_toolbar_icons" ng-repeat="toolbar in synapse_toolbar_icons" class="tile iconSizeClass synapse-toolbar bg-crimson ng-scope" data-toggle="tooltip" ng-click="bindData(toolbar.link_source, toolbar.link_fact_type)">'+
              '<div dynamic="toolbar.icon_html"></div>'+
              '</div>',
  };
});

Function on which I want to call directive again

$scope.remove_synapse_link = function(){

        $http({
                method : 'POST',
            }).success(function(data,status){
                // here I want to call that directive again 
            })
            .error(function(data,status){
                    $.notify("Something went wrong while adding dislike", "error");
            }); 
    }

Plunker http://plnkr.co/edit/FpzGkIpBPfOnoFrwQkmj?p=preview

I think you need to use a $watch function. Can you please provide the directive and controller code? — jme11, May 28 '15 at 11:26

score 13 · Accepted Answer · edited Jun 07 '16 at 16:30

13

$http returns a promise and is asynchronous. Your directive runs when your html renders. So what you do is don't render the HTML until you have the response.

HTML:

<div ng-if="ready"> 
   <div my-custom-directive></div>
</div>

Controller:

$scope.ready = false;    
$http.get('/my-request').success(function(){
    $scope.ready = true;
});

This works because the ng-if directive will create the element only if the expression becomes true.

edited Jun 07 '16 at 16:30

Maria Ines Parnisari

16,584
9
85
130

answered May 28 '15 at 11:05

Shubham Nigam

3,844
19
32

1

what if `flag` is already true and I want to run directive , if I'll make `flag = true` that will not run directive as `flag` was already `true` – saf May 28 '15 at 11:18
Make it false intially then make true in success() – Shubham Nigam May 28 '15 at 11:18
It will generate new HTML or show/hide same HTML that was existed initially – saf May 28 '15 at 11:22
@saf ng-if always create/remove new html every time .It will not hide/show the same html..Provide fiddle with it so that we can give you better solution. See this http://stackoverflow.com/questions/19177732/what-is-the-difference-between-ng-if-and-ng-show-ng-hide – Shubham Nigam May 28 '15 at 11:24
Plunker added , pls check – saf May 28 '15 at 11:51
yes it works but I have used $timeout b/w false and true so that directive have enough time to compute – saf May 28 '15 at 12:08

Angularjs run directive after success of $http

1 Answers1

Linked