重新编译AngularJS嵌套指令

时间:2015-02-24 13:57:29

标签: javascript angularjs

是否可以手动重新编译嵌套在另一个指令中的指令?

我有一个modal-create-task指令,它使用showCreateTaskModal事件和一些数据进行初始化。根据事件附带的数据,模态更改其UI布局,并更改名为search-projects的嵌套指令的行为。

我目前遇到的问题是我需要重新编译search-directive,因为它需要使用showCreateTaskModal传入的数据。

这是模态模板的样子:

<div class="ui modal" id="modalCreateTask" ng-controller="ModalCreateTaskCtrl">

    <search-projects oo-filter="{{ mode }}" oo-subject="searchProjectSubject"></search-projects>

</div>

正如您所看到的,oo-filteroo-subject属性都取决于附加到showCreateTaskModal事件的数据,但只有在编译器通过DOM后才会触发该事件。然后该指令无法访问所需的数据,因此它会回退到默认行为。

这是search-projects定义:

angular.module('app.ui.search.projects').directive('searchProjects', function(ConfigService)
{
    return {
        restrict : 'E',
        templateUrl : ConfigService.path.views + '/search/projects.html',
        scope : {
            filter : '@ooFilter',
            subject : '=ooSubject'
        }
    }
});

编辑1:

根据要求,我会尝试更好地解释我正在做的事情。

我有一个包含另一个指令的模态,该指令基于某些变量的内容,应该在属性发生变化时向服务器查询数据。

我想重新编译该指令,以便再次执行init()函数。

进行一些研究我也注意到可以使用$watch,但我不知道这是否是一个很好的解决方案。

2 个答案:

答案 0 :(得分:2)

指令很少需要重新编译。这可能表明方法或设计错误。

指令对数据做出反应。通常,数据通过属性,广播事件或与控制器的共享服务传递给指令。具体而言,隔离范围使用单向和双向数据绑定将数据传递给指令。

如果没有不同的触发器,可以$watch进行更改:

link: function(scope){
   scope.$watch("scopeVar", function(){
     // do something, like run init() again
   });
}

另一种选择是通过服务的直接触发,类似于Angular-UI $modal服务的工作方式。模态实例公开了一个方法,例如,从控制器中关闭模态(指令):

modalInstance.close(result);

这个想法可以类似地用于触发使用相同服务的指令中的某些操作。

答案 1 :(得分:1)

附上“&n-if-if&#39;条件到你的搜索项目&#39;基于来自您的事件的数据的指令。所以你的代码可能如下所示:

<div class="ui modal" id="modalCreateTask" ng-controller="ModalCreateTaskCtrl">

    <search-projects oo-filter="{{ mode }}" oo-subject="searchProjectSubject"
      ng-if="dataComingFromEvent"></search-projects>

</div>

当数据在&#39;模型中可用时,该指令将再次放入DOM中。 viz&quot; dataComingFromEvent&#39;因此你的指令将被重新编译。