No access to scope variables directly inside ng-template

Question

So I recently moved some repeated markup into ng-template blocks, and I noticed that inside the blocks, I do not get direct access to scope variables, but I can still call scope functions.

For instance, consider the following markup:

<script type="text/ng-template" id="toggle-button.html">
    <button ng-click="toggleFlag()">I Toggle the Flag</button>
    <button ng-click="flag = !flag">I Do Nothing</button>
</script>
<span ng-include="'toggle-button.html'"></span>
The flag is {{flag}}

Paired with the following script:

var app = angular.module('myApp', [])
.controller("myController", ['$scope', function($scope){
    $scope.flag = true;

    $scope.toggleFlag = function(){
        $scope.flag = !$scope.flag;
    }
}])

Live JS Fiddle of this behavior: http://jsfiddle.net/uM4Ss/

The first button works, the second does not. Can somebody please answer why this is the case?

SlyChan · Accepted Answer · 2014-04-15T18:22:08.947

13

ngInclude creates new child scope.

You should use $parent if you want to access parent scope variables. http://jsfiddle.net/mX7v2/

Also you can define controller inside template to share the same scope between controller and a template.

edited Apr 15 '14 at 18:22

answered Apr 15 '14 at 18:15

SlyChan

769
4
15

Can you elaborate as to `why` this is the case? Do templates get their own sub-scope? – StephenRios Apr 15 '14 at 18:17
@StephenRios ngInclude directive does – SlyChan Apr 15 '14 at 18:19

score 4 · Answer 2 · answered Apr 15 '14 at 18:17

You are binding to a primitive. Bind to an object instead, and the binding will work in the child scope: http://jsfiddle.net/wittwerj/uM4Ss/2/

<script type="text/ng-template" id="toggle-button.html">
    <button ng-click="toggleFlag()">I Toggle the Flag</button>
    <button ng-click="flags.flag = !flags.flag">I Do Nothing</button>
</script>
<span ng-include="'toggle-button.html'"></span>
The flag is {{flags.flag}}

script:

var app = angular.module('myApp', [])
.controller("myController", ['$scope', function($scope){
    $scope.flags=  {
        flag: true
    };

    $scope.toggleFlag = function(){
        $scope.flags.flag = !$scope.flags.flag;
    }
}])

http://stackoverflow.com/questions/12977894/what-is-the-angularjs-way-to-databind-many-inputs/13782671#13782671 — j.wittwer, Apr 15 '14 at 18:28

No access to scope variables directly inside ng-template

2 Answers2