Angularjs在$ http成功后运行指令

Question

我正在使用自定义导航directive,当一些添加/删除导航中的任何内容时,我想反映该导航的更改.如果导航来自范围,那么我可以更新范围,但因为nav来自指令,所以我不知道如何在$http成功时调用该指令.

这是我的指示:

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

在这里你可以看到我在指令中使用了一些属性,这有助于我获取精确的导航选项.

指令代码:

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

我想再次调用指令的函数

$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

Answer 1

$http返回一个promise并且是异步的.您的指令在您的html渲染时运行.所以你要做的就是在得到响应之前不要呈现HTML.

HTML:

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

控制器:

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

这是有效的,因为ng-if只有表达式变为true时,该指令才会创建元素.