无法直接在ng-template中访问范围变量

时间:2014-04-15 18:10:16

标签: javascript angularjs

所以我最近将一些重复的标记移动到ng-template块中,我注意到在块内部,我没有直接访问范围变量,但我仍然可以调用范围函数。

例如,请考虑以下标记:

<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}}

与以下脚本配对:

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

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

Live JS这个行为的小提琴: http://jsfiddle.net/uM4Ss/

第一个按钮有效,第二个没有。有人可以回答为什么会这样吗?

2 个答案:

答案 0 :(得分:13)

ngInclude 会创建新的子范围。

如果要访问父作用域变量,则应使用$parenthttp://jsfiddle.net/mX7v2/

您还可以在模板中定义控制器,以在控制器和模板之间共享相同的范围。

答案 1 :(得分:4)

你是binding to a primitive。绑定到对象,绑定将在子范围内工作: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}}

脚本:

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

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