модель представления (область) не привязывается к представлению (html) при маршрутизации с использованием angularjs ngRoute

Вот мой 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', function ($scope) { $scope.message="Main"; }]);

View1Controller имеет следующие коды: myControllers.controller('View1Controller', ['$scope', function ($scope) { $scope.message="View1"; $('#div1').hide(); }] );

View2Controller имеет следующие коды: myControllers.controller('View2Controller', ['$scope', function ($scope) { $scope.message="View2"; $('#div1').hide(); }] );

Вид1.cshtml:

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

Вид2.cshtml:

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

Когда я помещаю предупреждение (alert($scope.message)) в контроллеры, а затем щелкаю View1 или View2, я вижу, что он использует правильный контроллер для каждого View. Однако я не вижу сообщения.

View1 показывает: {{сообщение}}

Представление 2 показывает: пробный просмотр 2 {{сообщение}}

Почему он не может привязать модель к представлению? Пожалуйста, подскажите, что делать...


angularjs angularjs-scope angularjs-routing
person user2756589    schedule 06.02.2014    source источник
comment
Я вижу две проблемы. Во-первых, вы не закрыли тег <script>. во-вторых, MainController.js определен неправильно. Сделайте это: <script src="~/Scripts/App/controller/MainController.js"></script>. Если вы решили эту проблему, пожалуйста, напишите свой ответ.   -  person William Callahan    schedule 15.01.2016

Ответы (2)


arrow_upward
1
arrow_downward

В коде, похоже, не хватает нескольких вещей. Я предполагаю, что вы используете 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>

ПРИМЕЧАНИЕ. Это старый пост; возможно, это уже было решено.

person William Callahan    schedule 15.01.2016

arrow_upward
0
arrow_downward

При использовании угловой маршрутизации у вас может быть только одно представление для каждого приложения. Его следует определить как:

<div ng-view></div>

Это единственное представление получит контроллер и частичный запрос маршрута. Все остальное должно обрабатываться в вашем частичном и назначенном ему контроллере, который сам может иметь несколько контроллеров.

Если вам действительно нужно несколько/вложенных представлений, вам следует взглянуть на UI-Router.

person mainguy    schedule 06.02.2014
comment
index.cshtml - это мой основной вид.. view1 и view2 - это просто частичные представления, такие как страница с информацией или контактами. - person user2756589; 06.02.2014
comment
(Обоснование отрицательного голосования) Проблема показывает только один ng-view. - person William Callahan; 27.07.2015