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

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

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>

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

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

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

---

因此，我仍然不知道如何影响州视图中的控制器。

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

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

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

---

我认为您需要的只是通过属性将数据传递到指令中。然后在指令中使用一个独立的作用域，以便可以同时激活多个实例

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

本质上，这只是反转控制器/指令的布局。它在指令内部使用，而不是

TableController

包装指令。它是指令中的

控制器

的唯一原因是允许它由子指令（例如行指令或标题指令，甚至单元格指令）执行

require

。否则，如果不需要为注入而公开它，您可以使用

link

并在其中放入各种特定于表的操作

---

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

使用已经可用的表格/表格模块，这些模块在视图中设置为声明性或范围可配置，这样可以省去很多麻烦。有很多选择。只是根据您的需要检查功能的问题。或者用它们来激发灵感来构建自己的系统我认为你需要的是实现指令而不是控制器。正如您所知，您可以根据自己的喜好将特定的作用域数据传递给特定的指令。@charlietfl，我试图了解Angular是如何工作的，所以这只是一个示例。@yazaki，谢谢，但我有一个使用该作用域的指令。问题是适当的值如何进入范围？它们必须由控制器设置——这就是我要提出的问题：如何将这些值绑定到正确的控制器？我同意。这就是我想象的。谢谢@charlietfl这真的很有帮助（特别是指令范围部分）。不过，我遇到的问题是不想在父控制器中硬编码服务。换句话说，我想将任何命名服务注入到指令中。我将在下面的另一个答案中发布我的意思；非常感谢您的评论。但您始终需要这样做才能将数据传递给指令。如果指令构造正确，则从中的哪个服务获取数据并不重要，甚至在每个使用指令的视图控制器中调用

$http

，再次感谢响应——请您对我下面更新的答案发表意见好吗？（谢谢）

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

angular.module('main', [])

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

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

    }
});