1

angular-ui我正在尝试使用tabs单击每个选项卡从不同的控制器调用不同的功能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控制器的函数。

<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>

问题：

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

4

2 回答 2

2

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

<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 的 Angular 风格指南建议使用控制器作为 $scope 的语法，请参阅风格指南。

于 2016-06-27T20:29:25.160 回答
1

在你的情况下，

你应该创建一个指令：

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

(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) {
                  
                };
              }
            ],
          };
        }
      })
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>

于 2016-06-27T20:56:58.733 回答