所以我最近将一些重复的标记移动到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/
第一个按钮有效,第二个没有。有人可以回答为什么会这样吗?
答案 0 :(得分:13)
ngInclude 会创建新的子范围。
如果要访问父作用域变量,则应使用$parent
。
http://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;
}
}])