Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS Upgrade (1.5 to 1.6,1.7) Makes directive scope bindings undefined

I have the following code:

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>

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?

like image 536
drabbitharv Avatar asked Feb 23 '17 20:02

drabbitharv


People also ask

How do I upgrade AngularJS version?

Selecting an update version If there is a big version gap between your application's AngularJS version and the latest, try updating versions incrementally. For example, if your application is running AngularJS 1.2, do not immediately upgrade it to 1.6. 6. Instead choose a version closer to 1.2.

Should I upgrade AngularJS to angular?

Business Benefits of Migrating from AngularJS to Angular Mobile-Driven Approach: Angular allows developers to build lightweight applications that offer faster downloads. And, this is one of the many reasons why Angular utilizes “lazy scripting”. This means that it would load particular modules only when needed.

What is directive scope in AngularJS?

The directive scope uses prefixes to achieve that. Using prefixes helps establish a two-way or one-way binding between parent and directive scopes, and also make calls to parent scope methods. To access any data in the parent scope requires passing the data at two places – the directive scope and the directive tag.

Can you mix AngularJS and angular?

With it you can mix and match AngularJS and Angular components in the same application and have them interoperate seamlessly. That means you don't have to do the upgrade work all at once, since there is a natural coexistence between the two frameworks during the transition period.


2 Answers

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:

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


UPDATE

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

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.

From the Docs:

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

Note:

On 1July2018, support for AngularJS 1.6 ends. For more information, see AngularJS MISC - Version Support Status.

like image 189
georgeawg Avatar answered Oct 29 '22 00:10

georgeawg


I figured it out:

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

This defaults to false now, must set to true $compileProvider.preAssignBindingsEnabled(true);

like image 26
drabbitharv Avatar answered Oct 29 '22 00:10

drabbitharv