Ng-if和自定义指令

时间:2015-03-26 14:09:13

标签: angularjs angularjs-directive

我一直在创建涉及加载数据初始化的自定义指令。由于这个初始化取决于绑定到我的指令中的隔离范围的父对象的范围对象的状态,我已经将指令包含在ng-if语句中,所以它们只在DOM中呈现,因此被初始化,一旦创建了适当的父范围对象。

Ng-if似乎更可取,因为指令具有绑定到$ watch的各种API调用,我希望在数据有效之前不会触发。

例如,我有一个指令,它提供了一个用于编辑已调度事件的界面。父页面允许用户选择要编辑的事件,或创建新事件。创建新事件的方式允许用户选择各种值来预先填充事件对象(开始日期,事件类型,事件是否与数据库中的另一个对象相关联等)。

当用户进行处理事件所需的选择以及事件(现有事件,编辑或自定义服务创建的事件的框架)时,ng-if包装指令将设置为true ,for adds)绑定到指令的隔离范围。

这可以防止$ watches在有效事件绑定到指令之前触发,并且还允许我初始化指令本地的一些变量,以便对事件进行验证和数据操作。

我遇到的问题是将指令包含在ng-if隔离隔离范围内。

例如,事件的开始时间是用户在从控制器创建新事件时可能或可能不会指定的事件。如果他们不这样做,我想根据指令中的其他变量计算默认开始时间。如果他们这样做,那么我想使用该值。

我这样做的方法是将范围变量从控制器绑定到指令的隔离范围:

scope: {
   editEvent: '=',
   overrideTime: '='
}

这是作为我的指令的属性传递的:

<add-edit-event ng-if="viewEdit" event="editEvent" override-time="overrideTime">
</add-edit-slot>

一旦指令创建了新事件(或取消),我想将父范围中的overrideTime重置为null。

但是,要从我的指令中做到这一点,我不能依靠双向绑定工作而不会遍历ng-if范围,因此:

scope.$parent.$parent.overrideTime = null;

我一直遇到这样的情况,因为指令被包含在ng-if中会导致范围的复杂化,这让我觉得我的一般方法存在问题。

有没有更好的方法来处理条件初始化和加载自定义指令,或者将它们包含在ng-if语句中,只要我适当地处理插入ng-if的范围?

0 个答案:

没有答案