Question

这是我的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'， [ '$范围'， function（$ scope）{ $ scope.message = “主”; }]）;

View1Controller具有以下代码： myControllers.controller（ 'View1Controller'， [ '$范围'， function（$ scope）{ $ scope.message = “视图1”; $（ '＃DIV1'）隐藏（）。 }]）;

View2Controller具有以下代码： myControllers.controller（ 'View2Controller'， [ '$范围'， function（$ scope）{ $ scope.message = “视图2”; $（ '＃DIV1'）隐藏（）。 }]）;

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时，我可以看到它正在为每个View使用正确的控制器。但是，我看不到这条消息。

View1显示： {{消息}}

View2显示： trialview2 {{消息}}

为什么它不能将模型绑定到视图？请给出一些关于该做什么的想法...

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

注意：这是一个老帖子;它可能已经解决了。

Answer 2

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

<div ng-view></div>

此唯一视图将接收路径请求的控制器和部分路径。其他所有内容都必须在您的部分控制器和指定的控制器中处理，控制器本身可以有多个控制器。

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

视图模型（范围）在使用angularjs ngRoute进行路由时不绑定到视图（html）

2 个答案: