Javascript 无法直接访问ng模板内的作用域变量

因此，我最近将一些重复标记移动到ng模板块中，我注意到在这些块中，我不能直接访问范围变量，但我仍然可以调用范围函数

例如，考虑下面的标记：

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

这种行为的真实性：

---

第一个按钮起作用，第二个按钮不起作用。有人能回答为什么会这样吗？

ngInclude创建了新的子范围

如果要访问父范围变量，应使用

$parent

。

您还可以在模板内定义控制器，以在控制器和模板之间共享相同的作用域。

您可以。改为绑定到对象，绑定将在子范围内工作：

---

你能详细解释一下为什么会这样吗？模板有自己的子作用域吗？@StephenRios ngInclude指令有

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

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

<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;
    }
}])