AngularJS指令控制器定义

AngularJS Directive Controller definition

本文关键字：定义 指令控制器 AngularJS      更新时间：2023-09-26

在AngularJS指令中，我了解有两种方法可以定义控制器。可以使用controller:选项将控制器定义为指令定义的一部分。或者，指令templateURL:'someview.html'的视图可以包含所需的控制器。有人能解释一下这两个选项之间的区别吗？什么时候使用哪一个？

指令内：

app.directive('myDirective', function() {
    templateUrl: 'someview.html,
    controller: 'MyController'   ----> either here
});

someview.html

<div ng-contoller='my-controller'>  ----> or here
</div>

如果指令在没有控制器的情况下会中断，那么该指令应该定义它需要的控制器。这将在指令和控制器之间创建一对一的关联。

假设我们有一个需要"BookingController"的"Booking"指令。开发人员每次需要使用Booking指令时都要指定指令和控制器，这是多余的。因此，该指令可以定义controller: "BookingController"，并且AngularJS将在使用该指令时自动实例化该控制器。

如果你的指令是通用的呢？您有一个只处理预订订单格式的指令，但有许多控制器可以处理不同类型的预订。在这种情况下，指令不会定义控制器。它只会定义当前范围中需要的"booking_number"。开发人员必须在处理预订的控制器下的DOM中的某个位置"使用"该指令。

最好将指令视为发布当前作用域但不操作当前作用域的代码。控制器是操作当前作用域的代码，但不知道作用域是如何发布的。视图（或HTML）是按照依赖关系的顺序将这两个东西捕捉在一起的地方。

如果在指令外定义控制器，请确保在控制器名称周围加引号（"或'），否则会显示错误

错误：

controller: MyController

正确：

controller: 'MyController'

它带来了巨大的不同；在第二种情况下，控制器将在引导时注入。

为指令提供controller密钥时的一个重要区别是，该指令的控制器可以由其他指令使用require d。例如，以下是AngularJS主页底部的两个指令片段：

app.directive('tabs', function() {
  return {
    // ...
    controller: function($scope, $element) {
      this.addPane = function() {
        // ...
      };
    },
    // ...
  };
});
app.directive('tab', function() {
  return {
    // ...
    // require the controller from the `tabs` directive
    // on a parent element
    require '^tabs',
    // required controller passed as fourth parameter
    link: function(scope, elem, attrs, tabsController) {
      tabsController.addPane(...);
    }
  };
});

<tabs>
  <tab>...</tab>
  <tab>...</tab>
</tabs>
相关文章：