Angular SPA 数据绑定

Question

我的 angular SPA 数据绑定没有自动更新。希望你能告诉我为什么。

-

这是我的 JS 文件：

var app = angular.module('SDMApp', ['ngRoute']);

app.config(function ($routeProvider) {
    $routeProvider
        .when('/para', {
            templateUrl: 'view/ParaView.html',
            controller: 'MainController'
        });
});

app.controller('MainController', function($scope) {
    $scope.CurrentlyShowing = "Hello";
});

还有我的 html 文件：

<!DOCTYPE html>
<html ng-app="SDMApp">
<head lang="en">
    <meta charset="UTF-8">

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-route.min.js"></script>
    <script src="Angular.js"></script>
    <title></title>
</head>
<body ng-controller="MainController">
    <div ng-view></div>
    <input ng-model='CurrentlyShowing'>
</body>
</html>

还有我的模板：

<p>{{ CurrentlyShowing }}</p>

-

虽然它最初显示的是 "Hello"，但当我在我的输入元素（正文中的 html 输入元素）中写入时，模板中的段落不会更新。这是这种情况的一个例子：http://plnkr.co/edit/ALEDabL7lmKKgFmGzCce?p=preview .

当我用模板中的段落替换 ng-view div 并写入我的输入元素时，它会正常更新。这是这种情况的一个例子：http://plnkr.co/edit/TniFrGYBnNQLz8A3BfQ5?p=preview .

谁能告诉我哪里出了问题？

Answer 1

您指定了两次控制器

app.config(function ($routeProvider) {
    $routeProvider
        .when('/para', {
            templateUrl: 'view/ParaView.html',
            controller: 'MainController' //1st time
        });
});

第二次来这里<body ng-controller="MainController"> 从你的配置块中删除它，它就会工作。

app.config(function ($routeProvider) {
    $routeProvider
        .when('/para', {
            templateUrl: 'view/ParaView.html'
        });
});

如果要在路由中定义controller，需要在模板中包含，否则不在controller范围内。

我建议这样做：http://plnkr.co/edit/QKA5aKSfe1Z3D8yO7Vkn?p=preview

Angular SPA 数据绑定

Angular SPA databinding

data-binding

angularjs

single-page-application