Question

假设我有一个通用控制器TableController，它可以在应用程序的多个位置使用，通过自定义指令ui-table显示一个Key x Value对表，生成一个HTML表。

angular.module('ui.table', [])
  .controller('TableController', ['$scope', 'data', 
     function($scope, data) { $scope.data = data; }])
  .directive('uiTable', function() {
    return { templateUrl: 'table.html' }
});

我可以在以下模板中使用控制器：

<div ng:controller="TableController">
  <div ui-table></div>
</div>

创建工厂以将数据传递给此控制器。

.factory('data', function() {
  return [{'App':'Demo', 'Version':'0.0.1'}];
})

但是，我有多个控制器（有时在相同的视图中），所以我需要将特定工厂“绑定”到特定的控制器（例如，UserProfile，AppData等）

我已经开始关注angular-ui-router的$ stateProvider，但对于一个典型的用例来说它似乎太复杂了？我真正希望能够做的是使用模板来注释哪个工厂（我认为是模型）应该用于该特定控制器。例如：

<div ng:controller="TableController" ng:model="AppData"></div>

什么是正确的方法？

编辑：

我已经想出$ stateProvider和“resolve”允许我将提供者服务映射到状态主控制器的注入值 - 但我想影响的控制器是该控制器的子控件。

    $stateProvider
      .state('home', {
        url: '/home',
        templateUrl: '/home/view.html',
        controller: 'MainViewController',
        resolve: {
          'data': 'AppData'
        }
      });

所以，我仍然无法弄清楚如何影响状态视图中的控制器。

Answer 1

我认为您正在寻找的只是通过属性将数据传递到指令中。然后在指令中使用隔离范围，这样您就可以同时激活多个实例

<div ng-controller="ViewController">
    <div ui-table dataSource="tableData"></div>
</div>

然后，无论传入的数据如何，您的指令都将以通用方式编写，以便可重复使用。

.factory('SomeService', function(){
      var data ={
           headings: ['ID','Age','Name'],
           rows:[
             {id:1, 33,'Bill'}......
           ]
      };
      return {
         get:function(){ return data;}
      };
 }) 

.controller('ViewController', function($scope, SomeService){
    $scope.tableData = SomeService.get();
})

.directive.directive('uiTable', function () {
    return {
        scope: {
            dataSource: '=' // isolated scope, 2 way binding 
        }
        templateUrl: 'table.html',
        controller: 'TableController', // this controller can be injected in children directives using `require`

    }
});

实质上，这只是颠倒了控制器/指令的布局。它不是TableController包装指令，而是在指令内部使用。它是指令中controller的唯一原因是允许它由子指令require组成，例如行指令或标题指令甚至单元指令。否则，如果不需要将其公开以进行注入，您可以使用link并在其中放置各种特定于表的操作

正如我的评论中所提到的，创建表指令有多种方法。一个是重型配置对象，另一个是大量使用许多子指令的声明性视图html。我建议分析几个不同的网格/表格模块的来源，看看哪种最适合你的编码风格

Answer 2

部分谢谢@charlietfl（上图）我有一个答案：

<ui-graph model="SomeGraphModel"></ui-graph>

然后：

angular.module('ui.graph', [])

  .directive('uiGraph', [function() {
    return {
      controller: 'GraphController',
      scope: {
        model: '@model' // Bind the element's attribute to the scope.
      }
    }
  }]);

  .controller('GraphController', ['$injector', '$scope', '$element',
    function($injector, $scope, $element) {
      // Use the directive's attribute to inject the model.
      var model = $scope.model && $injector.get($scope.model);
      $scope.graph = new GraphControl($element).setModel(model);
    }])

然后在app中的其他地方（即，不一定在指令/控制器的模块中）：

angular.module('main', [])

  .factory('SomeGraphModel', function() {
    return new GraphModel();
  })

Angular：将状态注入控制器（或将“模型”绑定到控制器）

2 个答案: