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數據綁定

回答

相關問題