AngularJS升级(1.5到1.6,1.7)使指令作用域绑定未定义

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版本中，这与预期的一样，我的控制器中的变量是带着值进入的。现在，自从我升级到1.6.x后，self.pageConfiguration现在是未定义的。

除了angular版本之外，什么都没有改变。

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

Answer 1

AngularJS团队建议将依赖于范围绑定的控制器代码移动到$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：

预分配绑定已被弃用，并将在未来的版本中删除，因此我们强烈建议您尽快迁移应用程序，使其不再依赖它。

-- AngularJS Developer Guide - Migrating from v1.5 to v1.6 - $compile

更新

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

从文档中：

由于38f8c9，构造函数中不再提供指令绑定。

以前，支持$compileProvider.preAssignBindingsEnabled标志。

要迁移您的代码：

• 如果你指定了$compileProvider.preAssignBindingsEnabled(true)，你需要首先迁移你的代码，这样标志就可以翻转成false。然后，删除$compileProvider.preAssignBindingsEnabled(true)语句。

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

注意：

2018年7月1日，对AngularJS 1.6的支持将终止。有关详细信息，请参阅AngularJS MISC - Version Support Status。

Answer 2

我想通了：

https://github.com/angular/angular.js/commit/dfb8cf6402678206132e5bc603764d21e0f986ef

此默认值为false，必须设置为true $compileProvider.preAssignBindingsEnabled(true)；