AngularJS升级（1.5到1.6,1.7）使指令范围绑定未定义 [英] AngularJS Upgrade (1.5 to 1.6,1.7) Makes directive scope bindings undefined

问题描述

我有以下代码：

angular
  .module('myApp')
  .directive('layout', function () {
      return {
          restrict: 'E',
          template: '<div ng-include="layoutCtrl.pageLayout"></div>',
          controller: 'LayoutController',
          controllerAs: 'layoutCtrl',
          bindToController: true,
          scope: {
              pageLayout: '=',
              pageConfiguration: '=',
              isPreview: '='
          }
      };
  });

angular
  .module('myApp')
  .controller('LayoutController', LayoutController);

function LayoutController($scope, LayoutDTO, LayoutPreviewDTO) {
    var self = this;
    self.layoutDTO = LayoutDTO;
    self.layoutPreviewDTO = LayoutPreviewDTO;
    var test = $scope;

    if(self.isPreview)
        self.layoutModel = new self.layoutPreviewDTO(self.pageConfiguration);
    else
        self.layoutModel = new self.layoutDTO(self.pageConfiguration);
}


<div>
    <layout page-layout="ctrl.layoutTemplateUrl" page-configuration="ctrl.pageConfiguration" is-preview="false"></layout>
</div>

在1.5.3版本中，它按预期工作，我的Controller中的变量与价值观。现在，自从我升级到1.6.x以来，self.pageConfiguration现在是未定义的。

In the angular 1.5.3 version this worked as expected, the variables in my Controller were coming in with values. Now, since I upgraded to 1.6.x, self.pageConfiguration is now undefined.

除了角度版本，什么都没有改变。

Nothing has changed except for the angular version.

如何获取传递给控制器​​中指令的值的句柄？

How do I get a handle on the values passed into the directive in my controller?

推荐答案

AngularJS团队建议将依赖于范围绑定的控制器代码移到 $ onInit 函数中。

The AngularJS team recommends that controller code that depends on scope bindings be moved into an $onInit function.

function LayoutController($scope, LayoutDTO, LayoutPreviewDTO) {
    var self = this;
    this.$onInit = function () {
        // bindings will always be available here
        // regardless of the value of `preAssignBindingsEnabled`.
        self.layoutDTO = LayoutDTO;
        self.layoutPreviewDTO = LayoutPreviewDTO;
        var test = $scope;

        if(self.isPreview)
            self.layoutModel = new self.layoutPreviewDTO(self.pageConfiguration);
        else
            self.layoutModel = new self.layoutDTO(self.pageConfiguration);
    };
}

$ compile：

$compile:

由于 bcd0d4 ，预先分配了绑定默认情况下，控制器实例上的on处于禁用状态。仍然可以重新打开它，这在迁移过程中会有所帮助。预分配绑定已被弃用，并将在以后的版本中删除，因此我们强烈建议迁移您的应用程序，使其不尽快依赖它。

Due to bcd0d4, pre-assigning bindings on controller instances is disabled by default. It is still possible to turn it back on, which should help during the migration. Pre-assigning bindings has been deprecated and will be removed in a future version, so we strongly recommend migrating your applications to not rely on it as soon as possible.

初始化逻辑应放在控制器的 $ onInit（）方法中，该方法保证始终被称为 after 绑定已分配。

Initialization logic that relies on bindings being present should be put in the controller's $onInit() method, which is guaranteed to always be called after the bindings have been assigned.

-AngularJS开发人员指南-从v1.5迁移到v1.6-$ compile

---

UPDATE

$ compileProvider.preAssignBindingsEnabled 标志已从AngularJS V1.7中删除。

---

UPDATE

The $compileProvider.preAssignBindingsEnabled flag has been removed from AngularJS V1.7.

AngularJS团队强烈建议迁移您的应用程序，使其不要尽快依赖它。

The AngularJS team strongly recommends migrating your applications to not rely on it as soon as possible. AngularJS V1.6 goes end-of-life on 1July2018.

来自文档：

由于 38f8c9 ，指令绑定在构造函数中不再可用。

Due to 38f8c9, directive bindings are no longer available in the constructor.

以前，支持 $ compileProvider.preAssignBindingsEnabled 标志。该标志控制绑定是在控制器构造函数内部可用还是仅在 $ onInit 挂钩中可用。绑定现在在构造函数中不再可用。

Previously, the $compileProvider.preAssignBindingsEnabled flag was supported. The flag controlled whether bindings were available inside the controller constructor or only in the $onInit hook. The bindings are now no longer available in the constructor.

要迁移代码：

• 如果您指定了 $ compileProvider.preAssignBindingsEnabled（true），则需要先迁移代码，以便将该标志翻转为 false 。 中提供了有关操作方法的说明。从1.5迁移到1.6指南。然后，删除 $ compileProvider.preAssignBindingsEnabled（true）语句。

• If you specified $compileProvider.preAssignBindingsEnabled(true) you need to first migrate your code so that the flag can be flipped to false. The instructions on how to do that are available in the "Migrating from 1.5 to 1.6" guide. Afterwards, remove the $compileProvider.preAssignBindingsEnabled(true) statement.

< a href = https://docs.angularjs.org/guide/migration#-compile- rel = noreferrer>> AngularJS开发人员指南-迁移至V1.7-编译

注意：

在2018年7月1日，对AngularJS 1.6的支持终止。有关更多信息，请参见 AngularJS MISC-版本支持状态。

这篇关于AngularJS升级（1.5到1.6,1.7）使指令范围绑定未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！