Angular UI路由器控制器范围

Question

When I use a regular Angular controller, I place the controller attribute inside a DOM element, and the controller controls all DOM tree inside this element, eg

<div ng-controller="myController">

When I attach a controller via ui-router I do it in my app.js file, via the states config, like this:

.state('report', {
    url: '/site/:site/report',
    templateUrl: 'minderbinder/report/view/report.html',
    controller: 'ReportController'
})

What is the scope of this controller?

Answer 1

You shouldn't declare your controller manually in your div , unless your intent is to make a child (controller) of the ReportController to control some nested and specific part of your DOM.

As a child, then myController would inherit from ReportController 's scope, this latter being the upmost controller of your template.

The benefit of avoiding to declare controller in your HTML is to promote reusability of your HTML template across potential various controllers, using the exact same HTML.

A typical example would be an edit form and an adding form (CRUD) mapped to their own distinct controllers but the same HTML template.