Angular SPA数据绑定

我的角度SPA数据绑定未自动更新。希望你能告诉我为什么。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并写入我的input元素时，它更新正常。这是这种情况下的蹲点：http://plnkr.co/edit/TniFrGYBnNQLz8A3BfQ5?p=preview。

谁能告诉我什么是错？

来源

2015-03-13 MyrionSC2

您指定控制器两次

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' 
     }); 
});

如果要在路由中定义控制器，则需要在模板中包含该控制器，否则将不在控制器范围内。

来源

2015-03-13 11:55:03

（更新的Plunker链接）。如果你想知道为什么你应该使用Controller As语法，请看看这里：https://github.com/johnpapa/angular-styleguide#controlleras-view-syntax – 2015-03-13 12:03:23

谢谢，我一定会检查出来:)我有一个问题，但。为什么这样的事情不起作用：http://plnkr.co/edit/Ora7Eq2utAOiTBDy75cE?p=preview。我的意思是，这些元素具有相同的控制器，那么为什么自动数据绑定不起作用？ – MyrionSC2 2015-03-13 13:09:12

井控制器不是单例：这意味着你实际上创建了2个'MainController'实例：一个用于输入，一个用于ng-view。看到这个问题的深入解释：http://stackoverflow.com/a/16096598/3263450 – 2015-03-13 16:58:21

Angular SPA数据绑定

回答

相关问题