Corner JS: is it possible to use an AppLevel controller?

Question

I have a controller that is the controller for my page, but I was wondering if it is possible to have an AppLevel controller, that is, accessible from each page ... so that each page will have more than one controller assigned.

I know that maybe I can do this using a service and implement this service, but I was hoping for some kind of applevel controller that could be assigned.

If possible, how do I communicate between 2? I suppose to use dependency injection and just pass the applevel controller to my main page?

Anyone have an idea about this?

thanks

Answer 1

AngularJS uses prototype JavaScript inheritance so that regions can access the properties of the parent region. You can define controllers embedded in HTML and access the parent element from the child element. However, I urge you not to rely on this fact for your AppCtrl. In some cases, the scope you are working on will be isolated and will not be part of the inheritance hierarchy that has access to the AppCtrl scope.

I would suggest creating a service for this, or you could use pub / sub with $ rootScope. $ on and $ rootScope. $ broadcast.

To show an example of a service, I use the words shellCtrl and a shell service instead of an application to make the example a little understandable.

Defining a shell service should allow any other controller, directive, or service in your application to interact with the shellController and therefore the host view container.

<div ng-app="myApp" ng-controller="ShellCtrl"> <div ng-controller="SomeOtherCtrl"></div> </div> // parent controller defined on the same element as ng-app function ShellCtrl($scope, shell) { // I've just made the shell accessible to the $scope of shellctrl, but you can do // this in various ways. $scope.shell = shell; } // any other controller function SomeOtherCtrl($scope, shell) { shell.setTitle('Some title'); } // basic example of the shell service angular.module('myApp').factory('shell', function () { return { title = 'No title set', setTitle = function (title) { this.title = title; } } }); 

Now you can set the properties on the parent controller separately, without relying on a hierarchy of regions.

Answer 2

When you have a child controller in Angular, it inherits from the parent scope. Therefore, if you have one top-level controller that contains functions that some descendant controllers do not have, they will be referenced by a top-level function (or scope object). If one of the child controllers defines a local version of the function (or a property in the field), then it will no longer inherit from it the parent controller.

Scenario: http://jsfiddle.net/Y9yEQ/

HTML

 <div ng-app="myApp" ng-controller="TopLevelCtrl"> <button ng-click="testing()">Yo top level!</button> <button ng-click="testing2()">Yo top level 2!</button> <div ng-controller="ChildCtrl"> <button ng-click="testing()">Yo child!</button> <button ng-click="testing2()">Yo child2!</button> </div> </div> 

Js

 angular.module("myApp",[]).controller("TopLevelCtrl", function($scope){ $scope.testing = function() { alert("just testing"); } $scope.testing2 = function() { alert("just testing parent"); } }).controller("ChildCtrl", function($scope){ $scope.testing2 = function() { alert("just testing child"); } }) 

If you need to share some data between several controllers (since controller instances can be created or destroyed to support views when they are added / removed), you will want to use the service. If you have a strict structure for your controllers, you can $ emit call event popups or $ broadcast to send events by area.