这是我的代码:
的index.html:
<head>
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
的script.js:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: 'route.html',
controller: 'RouteController',
}).otherwise('/');
}]);
app.controller('RouteController', ['$scope', function($scope) {
$scope.hello='world';
}]);
app.controller('IncController', ['$scope', function($scope) {
$scope.field = '';
$scope.test = function() {
console.log('test=' + $scope.field);
}
}]);
route.html:
<div>
hello world
<div>{{hello}}</div>
<ng-include src="'including.html'"
ng-controller="IncController"></ng-include>
</div>
including.html:
<input type='text' ng-model='field'/>
<input type='button' ng-click='test()'/>
当我单击按钮test()函数正在调用时,但字段始终为空。 如果我为include.html制作路线,那么当我走这条路线时它就会起作用。
答案 0 :(得分:1)
原因是您在渲染ng-include
时使用了including.html
。当您使用ng-include
时,它会创建一个子范围,该范围是从父范围原型继承的。
在这种情况下,您需要在定义dot rule
时遵循ng-model
,这将倾向于使用Prototypal Javascript Inheritance
&amp;将从对象中获取价值。
您需要定义一个名为model
的对象,其中包含各种属性,例如$scope.model = { 'field': '' }
<强>标记强>
<input type='text' ng-model='model.field'/>
<input type='button' ng-click='test()'/>
<强>控制器强>
app.controller('IncController', ['$scope', function($scope) {
$scope.model = { 'field': '' };
$scope.test = function() {
console.log('test=' + $scope.model.field);
}
}]);
修改强>
您也可以编写自己的指令,例如ng-include
从URL
加载模板,但不会创建子范围。
您可以参考此方法here