AngularJs “controller as” syntax – clarification?

by

There are several things about it.

Some people don’t like the $scope syntax (don’t ask me why). They say that they could just use this. That was one of the goals.

Making it clear where a property comes from is really useful too.

You can nest controllers and when reading the html it is pretty clear where every property comes.

You can also avoid some of the dot rule problems.

For example, having two controllers, both with the same name ‘name’, You can do this:

<body ng-controller="ParentCtrl">
    <input ng-model="name" /> {{name}}

    <div ng-controller="ChildCtrl">
        <input ng-model="name" /> {{name}} - {{$parent.name}}
    </div>
</body>

You can modify both parent and child, no problem about that. But you need to use $parent to see the parent’s name, because you shadowed it in your child controller. In massive html code $parent could be problematic, you don’t know where that name comes from.

With controller as you can do:

<body ng-controller="ParentCtrl as parent">
    <input ng-model="parent.name" /> {{parent.name}}

    <div ng-controller="ChildCtrl as child">
      <input ng-model="child.name" /> {{child.name}} - {{parent.name}}
    </div>
</body>

Same example, but it is much much clearer to read.

More Related Contents:

  1. Working with select using AngularJS’s ng-options
  2. How do I set the value property in AngularJS’ ng-options?
  3. Angularjs Uncaught Error: [$injector:modulerr] when migrating to V1.3
  4. Why Does Firebase Lose Reference outside the once() Function?
  5. AngularJS- Login and Authentication in each route and controller
  6. Redirect a state to default substate with UI-Router in AngularJS
  7. how to use Protractor on non angularjs website?
  8. AngularJS multiple filter with custom filter function
  9. AngularJS $resource RESTful example
  10. AngularJS: Better way to watch for height change
  11. AngularJS group check box validation
  12. using AngularJS html5mode with nodeJS and Express
  13. Change format of md-datepicker in Angular Material with momentjs
  14. Resetting form after submit in Angularjs
  15. ES6 Promise not Updating AngularJS DOM [duplicate]
  16. Does Angular routing template url support *.cshtml files in ASP.Net MVC 5 Project?
  17. Angular 1 – get current URL parameters
  18. AngularJS : ng-model binding not updating when changed with jQuery
  19. In AngularJS, any inline javascript code that included in HTML templates doesn’t work
  20. How to delete ‘#’ sign in angular-ui-router URLs
  21. Remove ‘All Files’ option from HTML file input
  22. Jenkins error – Blocked script execution in . because the document’s frame is sandboxed and the ‘allow-scripts’ permission is not set
  23. ng-click not working in dynamically created content
  24. Show pop-ups the most elegant way
  25. AngularJS: lazy loading controllers and content
  26. Is it a bad practice to use jQuery in Angular? [closed]
  27. Rename Object Key in an array using javascript
  28. Function Called Multiple Times in AngularJS Repeat Section
  29. Load static JSON file in Webpack
  30. Decode HTML entity in Angular JS

Leave a Comment