多控制器页面中的数据绑定无效

时间:2015-10-17 20:15:03

标签: javascript angularjs

这是我的代码:

的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制作路线,那么当我走这条路线时它就会起作用。

1 个答案:

答案 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-includeURL加载模板,但不会创建子范围。

您可以参考此方法here