AngularJS 升级(1.5 到 1.6,1.7)使指令范围绑定(bind)未定义

Question

我有以下代码:

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>

在 Angular 1.5.3 版本中，这按预期工作，我的 Controller 中的变量带有值。现在，自从我升级到 1.6.x 后，self.pageConfiguration 现在未定义。

除了 Angular 版本外，没有任何变化。

如何获取传递到 Controller 中的指令的值的句柄？

Answer 1

AngularJS 团队建议将依赖于作用域绑定(bind)的 Controller 代码移至 $onInit 函数中。

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:

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.

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 Developer Guide - Migrating from v1.5 to v1.6 - $compile

<小时/>

更新

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

AngularJS 团队强烈建议尽快迁移您的应用程序，使其不再依赖它。AngularJS V1.6 将于 2018 年 7 月 1 日终止生命周期。

来自文档:

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

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.

To migrate your code:

• 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.

— AngularJS Developer Guide - Migrating to V1.7 - Compile

注意:

2018 年 7 月 1 日，对 AngularJS 1.6 的支持结束。欲了解更多信息，请参阅AngularJS MISC - Version Support Status .