Question

所以，我不确定我问的是什么，但我想实现这个目标：

的index.html：

<div ng-view>

</div>
<script>
    angular.module('myApp', ['ngRoute'])
    .config(['$routeProvider', function ($routeProvider) {
        $routeProvider.when('/', { controller: "HomeController", templateUrl: '/Partials/Home/Dashboard.html' });

        $routeProvider.otherwise({ redirectTo: '/' });
    }]);
</script>

主页/ Dashboard.html：

<h2 class="page-header">{{welcome}}</h2>

<!-- Insert my reusable component here -->

我的可重用组件将驻留在MyComponent/Component.html中，并且控制器myApp.component.controller与之关联。

因此，我希望将可恢复组件放入页面并将其绑定到我的控制器。所以我得到了这个：

.directive('MyComponent', function() {
    return {
      restrict: 'E',
      scope: {

      },
      templateUrl: '/MyComponent/Component.html'
    };
  });

那么我现在如何将控制器绑定到它呢？我这样做：

.directive('MyComponent', function() {
    return {
      restrict: 'E',
      resolve: function () {
        return /* resolve myApp.component.controller */;
      },
      templateUrl: '/MyComponent/Component.html'
    };
  });

Answer 1

当指令需要控制器时，它接收该控制器作为其控制器的第四个参数链接功能。

.directive('MyComponent', function() {
    return {
      restrict: 'E',
      controller: 'MyController', // attach it.
      require: ['MyController','^ngModel'],    // required in link function
      templateUrl: '/MyComponent/Component.html',
      link: function(scope, element, attrs, controllers) {
         var MyController = controllers[0];
         var ngModelCtlr = controllers[1];
         ///...
      }
    };
  });

^前缀表示该指令在其父节点上搜索控制器（没有^前缀，该指令将仅在其自己的元素上查找控制器）。

最佳实践：当您希望将API公开给其他指令时，请使用控制器。否则使用链接。

Answer 2

您可以将控制器分配给指令：

.directive('MyComponent', function() {
    return {
      restrict: 'E',
      controller : 'HomeController',
      templateUrl: '/MyComponent/Component.html'
    };
  });

Answer 3

所以我只想在这里澄清一些事情。

/MyComponent/Component.html ：

<h2>{{welcome}}</h2>

/mycomponent.directive.js ：

.directive('MyComponent', function() {
    return {
      restrict: 'E',
      controller : 'ComponentController',
      templateUrl: '/MyComponent/Component.html'
    };
  });

以上 index.html ：

中的绑定

<h2>{{welcome}}</h2> <!-- this is from ng-controller = HomeController -->

<my-component></my-component> <!-- this is scoping from ng-controller = ComponentController -->

这会生成结果

<h2>Hello from MyComponent</h2>
<h2>Hello from MyComponent</h2>

似乎ComponentController占据了整个范围。然后我将指令改为：

.directive('MyComponent', function() {
    return {
      restrict: 'E',
      // controller : 'ComponentController',
      templateUrl: '/MyComponent/Component.html'
    };
  });

并将 index.html 更改为：

<h2>{{welcome}}</h2> <!-- this is from ng-controller = HomeController -->

<div ng-controller="ComponentController">
    <my-component></my-component> <!-- this is scoping from ng-controller = ComponentController -->
</div>

这给出了正确的输出：

<h2>Welcome from HomeController</h2>
<h2>Welcome from ComponentController</h2>

然后我再次将指令更改为：

.directive('MyComponent', function() {
    return {
      restrict: 'A', // <----- note this small change, restrict to attributes
      // controller : 'ComponentController',
      templateUrl: '/MyComponent/Component.html'
    };
  });

我将 index.html 更改为：

<h2>{{welcome}}</h2>
<div ng-controller="ComponentController" my-component></div>

这也产生了所需的输出，只需要较少的代码行。

所以我希望这能更好地向人们澄清指示。我把它放在完整性和我为实现这一目标所采取的步骤上。显然，我从其他答案中得到了一些帮助，这些答案指出了我正确的方向。

将角度控制器应用于模板

3 个答案: