What sense does have a new child scope inaccessible from parent controller? (created by ng- directives)

Question

In angular.js Some directives create child scopes. (ng-include, ng-if, etc)

I know there are ways to solve it, for example by declaring the variable in the scope of the controller. Just uncomment //$scope.inner = '1234' and removeng-init="inner='1234'and will work. Another solution would be to use a object in the parent scope containing the variable.

Still does not make sense to me.

What sense does have a scope without a controller? What practical use have these new child scope?

This is my example.

var app = angular.module('app', []);


app.controller('ctrl', ['$scope', function($scope) {
   $scope.result = "Result";
   $scope.outer = "outer";
   //$scope.inner = "1234";
   $scope.test1 = function() {
       if ($scope.inner) {
            $scope.result = $scope.inner;
       } else {
            alert("inner is not accesible");
       }
   }
    $scope.test2 = function() {
       if ($scope.outer) {
            $scope.result = $scope.outer;
       } else {
            alert("inner2 is not accesible");
       }
   }

}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" >
<script type="text/ng-template" id="/tpl.html">
    <input type="text" ng-init="inner='Inner'" ng-model="inner"></input>
    <button ng-click="test1()">TEST1</button>
</script>
<div>
 <ng-include src="'/tpl.html'"></ng-include> 
 <br/>
 <input type="text" ng-model="outer"></input>
 <button ng-click="test2()">TEST2</button>
 <p>{{result}}</p>
</div>
</div>

score 1 · Accepted Answer · edited May 23 '17 at 10:33

First you need to understand that scopes and controllers are two separate concepts.

The scope is an object that refers to your application model while a controller is a constructor function that you use to manipulate the scope.

So, "from an Angular's point of view", it's perfectly acceptable to have a scope that is not augmented by a controller.

The idea for creating new child scopes is to have a logical way to separate the application's model. Could you imagine having only one scope for your entire application? You would have to be very careful not to override functions or properties while manipulating the scope in your controllers. Since child scopes prototypically inherit from their parent scope you don't have to worry about that.

One practical example of the usability of these child scopes is, for example, when you have two ng-repeat directives side-by-side, "under" the same scope. If they didn't create their own child scopes, how would you have access to the $index, $first, $last, etc... properties from each of the ng-repeat directives? Without child scopes both would be polluting the "parent" scope with the same properties, overriding each other.

You can read more information on scopes here and on controllers here.

score 1 · Answer 2 · edited May 23 '17 at 10:33

Specifically for ngInclude this is by design: In many cases you want the included content to be isolated.

A scope really does make little sense if there is no js code that works with it, but that code may be in a controller or link function or (as in the case with ngInclude) a postLink function.

Also see How to include one partials into other without creating a new scope? which is almost a duplicate and has a workaround.

What sense does have a new child scope inaccessible from parent controller? (created by ng- directives)

2 Answers2