Question

这是我的代码：

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

Answer 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

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

1 个答案: