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

Question

所以我最近将一些重复的标记移到了 ng-template block 中，我注意到在 block 内部，我无法直接访问作用域变量，但我仍然可以调用作用域函数。

例如，考虑以下标记:

<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 Fiddle: http://jsfiddle.net/uM4Ss/

第一个按钮有效，第二个无效。有人可以回答为什么会这样吗？

Answer 1

ngInclude 创建新的子作用域。

如果你想访问父作用域变量，你应该使用$parent。 http://jsfiddle.net/mX7v2/

您还可以在模板中定义 Controller ，以在 Controller 和模板之间共享相同的范围。