javascript - AngularJS 指令将函数执行顺序与 require 链接起来

标签 javascript angularjs

我看过这个video我有一个问题找不到答案。有一个笨蛋http://plnkr.co/edit/L8OMoB?p=preview

HTML

<div ng-app="app">
            <div ng-controller="MyCtrl">
                <my-select-view on="color">
                    <my-view label="Red" value="red"><span class="red-text">Red Content</span></my-view>
                    <my-view label="Blue" value="blue"><span class="blue-text">Blue Content</span></my-view>
                    <my-view label="Green" value="green"><span class="green-text">Green Content</span></my-view>
                    <my-view label="Something" value="something"><span class="something-text">Something Content</span></my-view>
                </my-select-view>
            </div>
        </div>

JS

angular.module('app', ['ngSanitize'])
        .directive("mySelectView", function($compile) {

            return {
                restrict: "E",
                scope: { item : "=on"},
                controller: function($scope, $element) {
                    $scope.views = [];

                    this.addView = function(label, value, content) {
                        $scope.views.push({ label: label, value: value, content: content });
                    }

                },
                link: function(scope, element, attrs, ctrl) {
                    var selectTpl = "<select ng-model='item'" +
                                    "        ng-options='view.value as view.label for view in views'" +
                                    "        ng-change='changeView()'></select>";

                    ...

                }
            }
        })
        .directive("myView", function() {
            return {
                restrict: "E",
                require: "^mySelectView",
                link: function(scope, element, attrs, ctrl) {
                    ctrl.addView(attrs.label, attrs.value, element.html());
                }
            };
        })
        .controller("MyCtrl", function($scope) {
            $scope.color = "something";
        });

我想知道一件事。我们得到指令“mySelectView”,其中包含“link”功能。这个“链接”功能取决于要定义的“views”变量并包含一些内容。

获取它的唯一方法是调用其他指令“myView”上的“link”函数。该指令对前一个指令有一个必需的参数。

所以我的问题是:指令“mySelectView”的“link”函数如何在指令“myView”的“link”函数之后执行。我假设这是因为“ng-option”属性需要 $scope.views 才能正确显示内容。这意味着“myView”的链接函数被执行并添加了 View 。

但是怎么办呢?谁决定这件事的顺序?为什么第一个指令的“link”函数不会因为未定义的 $scope.views 而失败?

任何帮助将不胜感激!

最佳答案

您的$scope.views不是未定义的。相反,它已被初始化为空数组 $scope.views = [];

我希望这个link将解答您关于链接函数执行顺序的问题

关于javascript - AngularJS 指令将函数执行顺序与 require 链接起来,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36768937/

相关文章:

Javascript正则表达式匹配捕获返回整个匹配,而不是组

javascript - 如何将一个数组中的值与另一个数组中的值成对相加?

javascript - Angularjs ui-router 未到达子 Controller

javascript - Angular JS 从数据库更新 View

javascript - 需要计算 AngularJS 中 PageLoad 和单击下一页之间的持续时间

javascript - 将 ng-options 值和标签绑定(bind)到 ng-model

javascript - 如何定义从服务器加载的图像的大小,例如宽度和高度

javascript - 如何解析和显示 TVML 文件中的 JSON 数据

javascript - JavaScript 中的模式匹配

angularjs - Angular js 使用 JSON 填充下拉列表