Question

我尝试使用angular-ui标签directive点击每个标签，从不同的控制器调用不同的功能。

HTML

<tabset>
  <tab heading="Reports" ng-controller="ReportsController" ng-click="fetchReports()" id="tab1">
    <div> Reports </div>
  </tab>
  <tab heading="Sales" ng-controller="SalesController" ng-click="fetchSales()" id="tab2">
    <div> Sales </div>
  </tab>
</tabset>

我收到这样的错误

多个指令[ngController，tab]要求新/隔离范围

要求

I have 5-6 tabs in a page. The page should not load the data of each tab at once. It should only load data for a tab once that tab is being clicked.

解决方案

我有一个解决方案，用tabset包装parent controller指令，以便我可以从broadcast获得ParentController个来自相应Child的函数{1}}控制器。

<div ng-controller='ParentController'>
  <tabset>
    <tab heading="Reports" id="tab1">
      <div ng-controller="ChildOneController"> Reports </div>
    </tab>
    <tab heading="Sales" id="tab2">
      <div ng-controller="ChildTwoController"> Sales </div>
    </tab>
  </tabset>
</div>

问题：

但遗憾的是，我的应用程序中有太多带有标签的页面，我不认为从ParentController到ChildController的每个标签的广播事件都是个好主意。我需要知道什么应该是一个很好的解决方案？

Answer 1

您可以使用控制器作为语法：

<div ng-controller="ReportsController as reports">
  <div ng-controller="SalesController as sales">
    <tabset>
      <tab heading="Reports" ng-click="reports.fetchReports()" id="tab1">
        <div> Reports </div>
      </tab>
      <tab heading="Sales" ng-click="sales.fetchSales()" id="tab2">
        <div> Sales </div>
      </tab>
    </tabset>
  </div>
</div>

以下是控制器的示例：

(function(){

  angular
    .module('app')
    .controller('ReportsController', [
      ReportsController
    ]);

  function ReportsController() {
    var vm = this;

    vm.fetchReports = function () {
      // fetch the reports! 
    };
  }

})();

来源：John Papa的角度风格指南建议使用控制器语法超过$ scope，请参阅style guide。

Answer 2

在你的情况下，

您应该创建 directive ：

通过这种方式，您可以使用loop来创建倍数具有多个控制器的指令。

＆＃13;

(function() {

    angular
      .module('app')
      .diretive('directiveTab', function() {
          return {
            restrict: 'AE',
            template: " <div> Reports </div>"//you can use templateUrl as well
            scope: {},
            controller: ['$scope',
              function($scope) {
                $scope.function1 = function(pane) {
                  
                };
              }
            ],
          };
        }
      })

＆＃13;

the directive will behave like controller and you can manipulate the content of each tab

<div ng-controller='ParentController'>
  <tabset>
    <tab heading="Reports" id="tab1">
      <directive-tab>
    </tab>
  </tabset>
</div>

＆＃13;

如何在角度ui选项卡中单击每个选项卡，从不同的控制器调用不同的功能？

2 个答案: