The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

AngularJS Architecture: Prefer the 'controller as' syntax

AngularJS Architecture: Prefer the 'controller as' syntax

5:02
As of Angular 1.2, the use of $scope injectable has been greatly reduced in favor of the "controller as syntax". We are going to take a quick look at cleaning up Eggly to follow this best practice.
Watch this lesson now
Avatar
egghead.io

As of Angular 1.2, the use of $scope injectable has been greatly reduced in favor of the "controller as syntax". We are going to take a quick look at cleaning up Eggly to follow this best practice.

Avatar
mifprojects

Hello Lukas!
I want to ask you, is there a good way to use some variable from parent state ctrl in child state ctrl using the controller as syntax?
For example using $scope way I have scope inheritance so it works fine, but how it could be done using new controller as syntax?
Thanks!

Avatar
Lukas

Hello --
I recommend checking out Todd Motto's excellent article on 'controller as' syntax here http://toddmotto.com/digging-into-angulars-controller-as-syntax/. Check out the section on nested scopes as he locks it down perfectly from the template side.

In terms of JavaScript, I would promote that variable to a service and share it between the two controllers which I cover in the next lesson. I would do my best to avoid implicit inheritance as it couples your two controllers together which makes extensibility and testing really hard.

Does this make sense?

In reply to mifprojects
Avatar
mifprojects

Thanks for answering.
I think you are right and it make sense.
Will wait next videos!
Thanks :)

In reply to Lukas
Avatar
frank stepanski

I did the same code, but do not get the updated information in the ..any ideas?

http://angularjs.javascriptworkshop.com/lesson7/step13/index.html#/categories/Development

Avatar
frank stepanski

nevermind....dumb caching :)

In reply to frank stepanski
Avatar
LW-IT

I did read ToddMotto's article but I can't figure it out how to modify a parent object from the child-controller with the controller as syntax.

Without controller as syntax:

function parentController($state, $scope, $translate) {
$scope.data.navTitle={}; //defined in parent (toplevel-object)
$scope.setPageTitle = setPageTitle;

function setPageTitle(){
$translate($state.current.data.pageTitle).then(function (data) { //title stored in config with $stateProvider
$scope.data.navTitle = data;
});
}
}
All child controllers are defined within the parent-controller and just call the function $scope.setPageTitle() of the parent-controller to set the page-title for the current state.

but when I try to use the controller as syntax, I'll end up with this

function parentController ($state, $translate) {
var vm = this;
vm.data.navTitle={};
vm.setPageTitle = setPageTitle;

function setPageTitle(){
$translate($state.current.data.pageTitle).then(function (data) {
vm.data.navTitle = data;
});
}
}
which works fine for the parentController but I wonder how to reach the setPageTitle() function from any childController with the controller as syntax.

I could wrap the setPageTitle() function in a service but it doesn't make sense to me how to change the object in the parent-scope.

kind regards Jan

In reply to egghead.io
Avatar
Lukas

Hi Jan! Controllers should not modify or have any knowledge of other controllers. You need to extract the common functionality to a service and then share the service between the two controllers. Another possible way to do this is to use the $emit method to send an event from your child controller to the parent controller. I generally prefer to promote to a shared service as it is easier to test and extend.

In reply to LW-IT
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?