Question

我目前正在开发一个项目，我使用主导航来打开延迟加载模板的标签。

编辑：澄清一下，标签的数量可能会因用户而异，所以我无法对其进行硬编码。

我尝试完成此操作的方法是使用带标题的Tabs控制器和标签项本身：

    <section class="tabs" ng-controller="Tabs">
        <div class="tabs__header">
            <div class="tabs__header__item is-hidden" ng-repeat="tab in tabs" data-item="{{tab.item}}" ng-if="!tab.header">
                <a class="tabs__header__item__text" ng-href="#/{{tab.item}}" ng-click="tabClicked($event)" data-item="{{tab.item}}">{{tab.name}}</a>
                <a href="#" class="tab-close">x</a>
            </div>
        </div>
        <div class="tabs__container">
            <div class="tabs__container__tab is-hidden" ng-repeat="tab in tabs" id="tab-{{ tab.item }}" ng-if="!tab.header" ng-controller="Tab" ng-include src="template.url"></div>
        </div>
    </section>

控制器看起来像这样：

Tabs.js：

function Tabs(scope, root) {

root.$on('/general/page/initdata', function(e, data) {
    //set default elements
    scope.tabs = data['nav-primary'];

    //open dashboard

});

root.$on('/nav/primary/open', function(e, itemName) {
    root.$emit('/tabs/activate', itemName);
    _setActiveTab(itemName);
});

scope.tabClicked = function(e) {
    e.preventDefault();
    var name = e.target.getAttribute('data-item');
    _setActiveTab(name);
};

function _setActiveTab(itemName) {
    var collection = document.querySelectorAll('.tabs__header__item.js-is-active, .tabs__container__tab.js-is-active');
    angular.element(collection).removeClass('js-is-active');

    collection = document.querySelectorAll('#tab-'+itemName+', .tabs__header__item[data-item="'+itemName+'"]');
    angular.element(collection).addClass('js-is-active').removeClass('is-hidden');
}

};

Tabs.$inject = ['$scope', '$rootScope'];

Tab.js

function Tab(scope, root) {

var loaded = false;

root.$on('/tabs/activate', function(e, itemName){
    if(scope.tab.item === itemName && !loaded) {
        loaded = true;
        scope.template = {url: '/frontend/templates/'+itemName+'.html'};
    }
});

};
Tab.$inject = ['$scope', '$rootScope'];

现在，问题是针对每个标签修改了template.url，而我只想为一个标签修改它。事实证明，范围是在各种Tab实例之间共享的。我怎么能绕过这个？

Answer 1

事实证明，AngularJS的问题并非如此。我只是在我的js-is-active类中犯了一个错误，导致显示错误的选项卡。

使用AngularJS隔离重用的控制器范围

1 个答案: