Question

我试图用角度来构建一个控件。我想要做的是使用一些自定义指令来构建一个选项卡数组。我已经将html定义如下：

<div class="tabber" ng-controller="tabController as tabControllerVM">
<div class="tabber-page-container">
    <div id="jobs-tab" class="tabber-page" tab-page="job queue">
       <p>Job Queue<p>
    </div>
    <div id="watchfolders-tab" class="tabber-page" tab-page="watchfolders">
       <p>Watchfolder tab</p>
    </div>
    <div id="admin-tab" class="tabber-page" tab-page="admin">
       <p>admin</p>
    </div>
</div>

该指令是标签页。当调用它时，我希望它将值添加到我的控制器中的数组，称为tabPages。一旦指令运行，我希望数组包含＆＃39;作业队列，＆＃39;观察文件夹＆＃39;管理员＆＃39;

我已按如下方式设置角度代码：

(function () {
'use strict';

angular
    .module('app')
    .controller('tabController', tabController)
    .directive('tabPage', addTabPage)

function tabController() {

    var vm = this;
    vm.tabPages = [];
    vm.addTab = AddTab;

    function AddTab(TabName) {
        vm.tabPages.push(new tab(TabName));
        alert(vm.tabPages.length);
    }
};


function addTabPage() {
    return {
        restrict: 'A',
        controller: "tabController",
        controllerAs: "tabControllerVM",
        scope: false,
        link: function (scope, elem, attr, controller) {
            controller.addTab(attr.tabPage);
        }
    }
};

}）（）;

每次添加新标签时，出于测试目的，我都会显示数组中的元素数量。问题是输出是1,1,1而不是1,2,3，正如我所料。仔细检查，每次运行指令时都会运行控件的构造函数，这将重新初始化我的所有变量。我已将其追溯到在控制器中调用的构造函数：＆＃34; tabController＆＃34;。如果我删除此行，则只调用一次构造函数。但是，link方法中的控制器实例不再具有任何初始化变量。是否可以将控制实例从一个指令调用传递到下一个？如果是这样，这是如何实现的？

非常感谢，

达明

更新

花了一天时间开发一个服务来保存数据后，我偶然发现了解决原始问题的方法。基本上我想要做的是访问与html元素相关联的控制器的实例。这可以使用表达式＆＃34; elem.controller（）＆＃34;在指令中轻松实现。它允许您访问绑定到指令中的UI的控制器实例。这是我的指令的一部分：

function addTabPage() {
    return {
        restrict: 'A',
        controller: "tabController",
        controllerAs: "tabControllerVM",
        scope: false,
        link: {
            post: function postLink(scope, elem, attr, controller) {

                elem.controller().tabs.push(new tab(attr.tabPage, false, elem));

                var tabs = elem.controller().tabs;

                for (var a = 0; a < tabs.length; a++) {
                    if (a != 0) {
                        tabs[a].DeselectTab(true);
                    }
                    else {
                        tabs[a].SelectTab(true);
                    }
                }
            }
        }
    }
};

美观而简单，效果很好。这允许我在解析html并将其呈现给浏览器时在控制器中保存一些变量。希望这会帮助其他人解决同样的问题。

角度指令和控制实例变量

0 个答案: