使用angularjs ngRoute路由时视图模型（范围）未绑定到视图（html）答案

【问题标题】：view model(scope) not binding to the view(html) when routing using angularjs ngRoute使用angularjs ngRoute路由时视图模型（范围）未绑定到视图（html）
【发布时间】：2014-02-06 14:43:25
【问题描述】：

这是我的 Index.cshtml，我有 3 个控制器。 MainController、View1Controller 和 View2Controller。

 <!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="View1"; $('#div1').hide(); }]);

View2Controller 有以下代码： myControllers.controller('View2Controller', ['$范围', 功能（$范围）{ $scope.message="View2"; $('#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>

当向控制器发出警报 (alert($scope.message))，然后单击 View1 或 View2，我可以看到它为每个视图使用了正确的控制器。但是，我看不到该消息。

View1 显示： {{消息}}

View2 显示：试用视图2 {{消息}}

为什么不能将模型绑定到视图？请给一些想法如何做...

【问题讨论】：

我发现了两个问题。首先，您没有关闭<script> 标签。其次，MainController.js 定义不正确。成功：<script src="~/Scripts/App/controller/MainController.js"></script>。如果您已解决此问题，请发布您的答案。

标签： angularjs angularjs-scope angularjs-routing

【解决方案1】：

代码似乎缺少一些东西。我假设您正在使用 Razor。以下是一些更正：

 <!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>

注意：这是一篇旧帖子；它可能已经解决了。

【讨论】：

【解决方案2】：

使用角度路由时，每个应用只能有一个视图。应该定义为：

<div ng-view></div>

这个唯一的视图将接收控制器和您的部分路由请求。其他一切都必须在您的部分及其分配的控制器中处理，它本身可以有多个控制器。

如果您真的需要多个/嵌套视图，您应该查看UI-Router

【讨论】：

index.cshtml 是我的主要视图。view1 和 view2 只是部分视图，例如关于或联系人页面
（反对投票的理由）问题只显示了一个 ng-view。