當使用angularjs進行路由時，視圖模型（作用域）不綁定到視圖（html）

這是我的Index.cshtml，我有3個控制器。 MainController，View1Controller和View2Controller。當使用angularjs進行路由時，視圖模型（作用域）不綁定到視圖（html）

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://code.angularjs.org/1.2.4/angular.js"></script> 
     <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
     <script src="http://code.angularjs.org/1.2.4/angular-route.js"></script> 
     <script src="~/Scripts/App/controller/View1Controller.js"></script> 
     <script src="~/Scripts/App/controller/View2Controller.js"></script> 
     <script src="/Scripts/App/controller/MainController.js"></script> 
     <script> 
     var myControllers = angular.module('myApp.controllers', ['myApp']); 
     var myServices = angular.module('myApp.services', ['myApp']); 
     var myApp = angular.module('myApp', ['myApp.controllers', 'myApp.services']); 
     myApp.config(function ($routeProvider) { 
      $routeProvider 
       .when('/', { 
        controller: 'View1Controller', 
        templateUrl: '/Partial/Views/View1' 
       }) 
      .when('/Partial/Views/View1', { 
       controller: 'View1Controller', 
       templateUrl: '/Partial/Views/View1' 
      }) 
      .when('/Partial/Views/View2', { 
       controller: 'View2Controller', 
       templateUrl: '/Partial/Views/View2' 
      }) 
    </head> 
    <body xmlns:ng="http://angularjs.org" ng-app="myApp" ng-controller="MainController"> 
    <div class="outer"> 
     <ul> 
      <li> 
      <a href="#/Partial/Views/View1" >View1</a> 
      </li> 
      <li> 
      <a href="#/Partial/Views/View2" >View2</a> 
      </li> 
     </ul> 
     <div class="main"> 
      <div ng-view></div> 
     </div> 
    </div> 
    </body> 
</html>

的MainController具有以下代碼： myControllers.controller（ 'MainController'， [ '$範圍'，函數（$範圍）{$ = scope.message 「主」; }] ）;

的View1Controller具有以下代碼： myControllers.controller（ 'View1Controller'， [ '$範圍'，函數（$範圍）{$ scope.message = 「視圖1」; $（'＃DIV1 '）.hide（）; }]）;

的View2Controller具有以下代碼： myControllers.controller（ 'View2Controller'， [ '$範圍'，函數（$範圍）{$ scope.message = 「視圖2」; $（'＃DIV1 '）.hide（）; }]）;

View1.cshtml：

<div ng-controller="View1Controller"> 
    <div id="div1">trialview1</div> 
    <div id="div2">{{message}}</div> 
</div>

View2.cshtml：

<div ng-controller="View2Controller"> 
    <div id="div1">trialview2</div> 
    <div id="div2">{{message}}</div> 
</div>

把當警報（警報（$ scope.message））的控制器，然後單擊視圖1或視圖2 ，我可以看到它爲每個視圖使用了正確的控制器。但是，我看不到消息。

視圖1所示： {{消息}}

視圖2所示： trialview2 {{消息}}

爲什麼不能將模型綁定到視圖請給一些想法是什麼？做...

來源

2014-02-06 user2756589

我看到兩個問題。首先，您沒有關閉''。如果你已經解決了這個問題，請張貼你的答案。 –

的代碼似乎缺少了一些東西。我假設你正在使用剃刀。下面是一些更正：

<!DOCTYPE html> 
<html xmlns:ng="http://angularjs.org"> 
    <head> 
     <script src="http://code.angularjs.org/1.2.4/angular.js"></script> 
     <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
     <script src="http://code.angularjs.org/1.2.4/angular-route.js"></script> 
     <script src="~/Scripts/App/controller/View1Controller.js"></script> 
     <script src="~/Scripts/App/controller/View2Controller.js"></script> 
     <script src="~/Scripts/App/controller/MainController.js"></script> 
     <script> 
     var myControllers = angular.module('myApp.controllers', ['myApp']); 
     var myServices = angular.module('myApp.services', ['myApp']); 
     var myApp = angular.module('myApp', ['myApp.controllers', 'myApp.services']); 
     myApp.config(function ($routeProvider) { 
      $routeProvider 
       .when('/', { 
        controller: 'View1Controller', 
        templateUrl: '/Partial/Views/View1' 
       }) 
      .when('/Partial/Views/View1', { 
       controller: 'View1Controller', 
       templateUrl: '/Partial/Views/View1' 
      }) 
      .when('/Partial/Views/View2', { 
       controller: 'View2Controller', 
       templateUrl: '/Partial/Views/View2' 
      }); 
     </script> 
    </head> 
    <body ng-app="myApp" ng-controller="MainController"> 
    <div class="outer"> 
     <ul> 
      <li> 
      <a href="#/Partial/Views/View1" >View1</a> 
      </li> 
      <li> 
      <a href="#/Partial/Views/View2" >View2</a> 
      </li> 
     </ul> 
     <div class="main"> 
      <div ng-view></div> 
     </div> 
    </div> 
    </body> 
</html>

注：這是舊的文章;它可能已經被解決了。

來源

2016-01-15 02:48:26

當使用角度路由時，你只能有一個視圖每個應用程序。應該definded爲：

<div ng-view></div>

這唯一視圖將收到CONTROLER和部分路線請求。必須在您的部分控制器及其分配的控制器中處理其他任何事情，該控制器本身可能具有多個控制器。

如果你真的需要多/嵌套視圖，你應該看看UI-Router

來源

2014-02-06 15:00:01 mainguy

index.cshtml是我的主視圖..view1和view2只是部分視圖，如關於或聯繫頁面 – user2756589

（正確的投票）問題只顯示一個ng-view。 –

當使用angularjs進行路由時，視圖模型（作用域）不綁定到視圖（html）

回答

相關問題