当前位置: 首页 > 面试题库 >

AngularJS:我应该将指令的链接功能转换为控制器吗?

皇甫鸿远
2023-03-14
问题内容

我听说将controllerAs语法和bindToController: true使用隔离范围的in指令一起使用是一种好习惯。参考文献:一,二

假设我有一个这样的指令:

angular.module('MyModule').directive('MyDirective', function(User) {
  return {
    scope: {
      name: '='
    },
    templateUrl: 'my-template.html',
    link: function(scope) {
      scope.User = User;
      scope.doSomething = function() {
        // Do something cool
      };
    }
  };
});



<!-- my-template.html -->
<div>
  User Id: {{ User.id }}
  Name: {{ name }}
  <button ng-click="doSomething()">Do it</button>
</div>

如您所见,该指令中没有控制器。但是,为了能够发挥作用controllerAsbindToController: true我必须拥有一个控制器。

将链接功能转换为控制器的最佳实践是吗?

angular.module('MyModule').directive('MyDirective', function(User) {
  return {
    scope: {
      name: '='
    },
    templateUrl: 'my-template.html',
    bindToController: true,
    controllerAs: 'myCtrl',
    controller: function() {
      this.User = User;
      this.doSomething = function() {
        // Do something cool
      };
    }
  };
});



<!-- my-template.html -->
<div>
  User Id: {{ myCtrl.User.id }}
  Name: {{ myCtrl.name }}
  <button ng-click="myCtrl.doSomething()">Do it</button>
</div>

我的理解是,指令的控制器应该用作公开指令与指令通信的指令API的机制

考虑到Angular 2.0,有人能阐明这些天的最佳做法吗?


问题答案:

我认为最好的做法是在指令的控制器内移动初始化代码和/或公开API函数,因为这样做有两个目的:

1. Intialization of $scope 
2. Exposing an API for communication between directives

范围的初始化

假设您的指令定义了子作用域(或继承作用域)。如果在链接函数内部初始化作用域,则子作用域将无法通过作用域继承访问此处定义的任何作用域变量。这是因为父链接功能总是在子链接功能之后执行。因此,范围初始化的适当位置在控制器功能内部。

公开控制器API

子指令可以通过指令定义对象上的’require’属性访问父指令的控制器。这允许指令进行通信。为了使它起作用,必须完全定义父控制器,以便可以从子指令的链接功能对其进行访问。实现此目的的最佳位置是控制器功能本身的定义。父控制器功能始终在子控制器功能之前被调用。

最后的想法

重要的是要了解链接功能和控制器功能有两个截然不同的目的。控制器功能设计用于初始化和指令通信,链接器功能设计用于运行时行为。根据代码的意图,您应该能够确定它是属于控制器还是属于链接器。

您是否应该将任何用于初始化作用域的代码从链接功能移至控制器功能?

是的,这是控制器功能存在的主要原因之一:初始化作用域,并允许其作用域参与原型作用域继承。

您是否应该将$ watch处理程序从链接功能移动到控制器功能?

否。链接功能的目的是连接行为并可能操纵DOM。在链接功能中,所有指令均已编译,并且所有子链接功能均已执行。这使它成为连接行为的理想场所,因为它已尽可能接近DOM准备就绪(直到在Render阶段之后才真正为DOM准​​备就绪)。



 类似资料:
  • 问题内容: 也许我对指令控制器的工作原理有一个基本的误解,据我了解,它们被用作暴露给其他指令和控制器的一种API。我正在尝试使控制器和链接功能进行内部通信。 例如,我希望能够通过控制器函数设置一个变量,然后在链接函数中使用它: 如何在链接功能中访问myVar或sayHi?还是我完全错过了重点? 问题答案: 控制器的$ scope(在控制器中定义,而不在函数中定义)和链接都相同。可以从链接中使用在控

  • 问题内容: 正常使用案例 如果您有父指令和子指令,则可以在父指令的控制器中创建方法,并在子指令中需要父控制器。Angular会将父控制器传递到您的子指令链接函数中。 我的用例 我有一个用例,其中子指令是另一个指令的父指令。我在中间的指令要求的顶部有on指令。中间的指令是底部的最后一个指令所必需的。 在一个简单的世界中,我可以为中间指令创建一个链接方法和一个控制器。link方法使用顶部控制器处理所有

  • 问题内容: 我可能会考虑将其完全倒退,但是我正在尝试制作三个嵌套指令,让它们称为:屏幕,组件和小部件。我希望窗口小部件能够触发组件中的某些行为,从而触发屏幕中的某些行为。所以: 我可以使用来在小部件的链接fn中要求父组件,但是如何进一步使组件控制器访问其包含的屏幕呢? 我需要的是WHAT in组件,因此,当您单击小部件的按钮时,它会发出“ screeny!”警报。 谢谢。 问题答案: 您可以通过以

  • 问题内容: 我正在尝试使用AngularJS创建我的第一个应用程序。但是,如果我需要针对特定​​情况使用指令,我会感到困惑。 我有一个简单的“地图”页面,需要在其中显示所选区域的纬度/经度值。目前,我根本没有使用指令。我在控制器中执行所有操作,并使用局部显示结果。我不打算在其他任何地方重用我的地图视图。这就是为什么我不觉得我需要指令。 另一方面,我读到某个地方,每次您尝试在控制器中操作DOM(我正

  • 问题内容: 很难找到该主题的任何线索。我只能找到有关将一个功能接口转换为另一个功能接口的问题,以及一些有关Java中类型转换的文章。不是我要找的东西。 这个问题是关于转换的,而我想相反地转换为任何功能接口,例如to 。 我发现的方法是围绕该方法创建一个lambda适配器: 但是我想避免写 赞成更简单的事情,例如 ➥因此,有没有办法将旧的Java 1.1反射库映射到较新的Java 8功能接口,还是我

  • 我刚反应过来。Im正在尝试将包含链接的数组转换成将在网站中按顺序显示链接的东西。 类似这样的事情: 在服务器中显示的内容如下所示: 我试着做我找到的下面的代码,但是它失败了: