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?
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.
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.
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.
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.
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
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 tofalse
. 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
On 1July2018, support for AngularJS 1.6 ends. For more information, see AngularJS MISC - Version Support Status.
I figured it out:
https://github.com/angular/angular.js/commit/dfb8cf6402678206132e5bc603764d21e0f986ef
This defaults to false now, must set to true $compileProvider.preAssignBindingsEnabled(true);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With