Question

我目前正在编写标签导航示例，以获得Angular的实践经验。此示例使用自定义指令和控制器继承。

可以找到Plunker here。

问题：指令完成处理后，我想选择要显示的默认选项卡。但是，在调用**Select O for odds and E for even: o YOU CHOSE ODD Choose a number between 0 and 2: 2 cpu chose 0 You're choice plus the cpu's choice equals 2 ... 2 Odd you win**控制器的selectTab方法（ script.js myTabs中的第41行）时，Angular还没有完成处理$ctrl.selectTab(0)指令（生成制表符链接），因此myTab数组为空，选择失败。

我尝试使用$ timeout没有延迟，但是失败了。 $ timeout只能设置500毫秒的延迟，这很麻烦。

是否有可用的事件或命令表示Angular处理某些指令的结束，特别是从彼此继承的指令？

我怀疑发生了什么：

tabs指令完成处理然后触发其链接函数，但在myTabs指令完成处理之前触发了它。我无法在myTab链接函数中放置selectTab方法调用，因为会多次调用（根据处理的标签数量）。希望我能清楚地解释这一点。 ..我需要按摩

myTab

Answer 1

每个单独的选项卡都使用父指令控制器进行注册。只需在第一个选项卡上注册时设置selected标志：

this.tabs = [];
this.addTab = function (tab) {
    console.log("add tab ", tab);
    if (!this.tabs.length) {
        //Set flag for first tab to register
        tab.selected = true;
    };
    this.tabs.push(tab);
};

DEMO on PLNKR

Answer 2

AngularJS 1.5.3引入了$postLink生命周期钩子：

生命周期挂钩

指令控制器可以提供Angular在指令生命周期中的点调用的以下方法：


$postLink() - 在此控制器的元素及其子元素已被链接之后调用。与post-link函数类似，此钩子可用于设置DOM事件处理程序并执行直接DOM操作。请注意，包含 templateUrl指令的子元素将不会被编译并链接，因为它们正在等待其模板异步加载，并且它们自己的编译和链接已暂停，直到发生这种情况。

- AngularJS $compile Service API Reference -- Life-cycle hooks

$postLink生命周期钩子在这种情况下不起作用，因为指令使用templateUrl。它也不适用于在postlink之后构建DOM的指令; ng-repeat，ng-if，ng-include等

Angular事件或命令，表示处理子指令的结束

2 个答案:

生命周期挂钩