Angularjs 1.3 controller not working
I am using one controller on two different parts of the page. To do this, I use a controller alias using the "controller as" syntax. But after upgrading to Angular 1.3.15 it doesn't work anymore. The next one is a violin for simulating the situation.
Please let me know if I make mistakes.
<div ng-app="myapp">
<div ng-controller="PersonCtrl">
<input type="text" ng-model="first">
<p>{{first}}</p>
</div>
<div ng-controller="PersonCtrl as person">
<p>{{person.$scope.first}}</p>
</div>
source to share
Just remove the second controller with "as" and make it <div ng-controller="PersonCtrl">
as the parent controller and rewrite the expression in another div to apply the same ng controller model.
<div ng-app="myapp">
<div ng-controller="PersonCtrl">
<input type="text" ng-model="first">
<p>{{first}}</p>
<div>
<p>{{first}}</p>
</div>
</div>
source to share
From: docs.angularjs.org
The isolated scope of a component directive no longer flows into the template containing the directive instance. This means that you can no longer access the isolated scope from the attributes of the element where the sandboxed directive is defined.
See https://github.com/angular/angular.js/issues/10236 for an example.
Requesting selection scope and any other scope on the same element is an error. Prior to this change, the compiler allowed two directives to request a child scope and an allocation scope if the compiler applied them in the order of a non-fenced scope directive followed by a scope area directive.
Now the compiler will fail regardless of the order.
source to share
This is due to a migration issue. Old controller syntax doesn't work.
From https://docs.angularjs.org/guide/migration
Because of 3f2232b5
, $controller
will no longer look for controllers in the window. The old viewport behavior for controllers was originally intended for use in examples, demos, and toy apps. We found that using global controller functions encouraged bad practice, so we decided to disable this behavior by default.
To migrate, register your controllers with modules, rather than expose them as global:
Before:
function MyController() {
// ...
}
After:
angular.module('myApp', []).controller('MyController', [function() {
// ...
}]);
While not recommended, you can re-enable the old behavior like this:
angular.module('myModule').config(['$controllerProvider', function($controllerProvider) {
// this option might be handy for migrating old apps, but please don't use it
// in new ones!
$controllerProvider.allowGlobals();
}]);
Hope it helps you.
source to share
Try it like in working fiddle https://jsfiddle.net/janega/tnnh6u5w/1/
var PersonCtrl = (function () {
function PersonCtrl($scope) {
this.$scope=$scope;
this.$scope.first = 'First';
this.$scope.last = 'Last';
}
return PersonCtrl;
})();
angular.module('myapp', []);
angular.module('myapp')
.controller('PersonCtrl',PersonCtrl);
PersonCtrl.$inject =['$scope', '$log'];
function PersonCtrl($scope,$log){
if (PersonCtrl.Instance === undefined) {
PersonCtrl.Instance = new PersonCtrl($scope, $log);
}
return PersonCtrl.Instance;
}
source to share