view model(scope) not binding to the view(html) when routing using angularjs ngRoute

Question

Here is my Index.cshtml, and I have 3 controllers. The MainController, View1Controller and 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>

The MainController has the following codes: myControllers.controller('MainController', ['$scope', function ($scope) { $scope.message="Main"; }]);

The View1Controller has the following codes: myControllers.controller('View1Controller', ['$scope', function ($scope) { $scope.message="View1"; $('#div1').hide(); }]);

The View2Controller has the following codes: myControllers.controller('View2Controller', ['$scope', function ($scope) { $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>

When putting an alert (alert($scope.message)) to the controllers, and then clicking the View1 or View2, I can see that it is using the correct controller for each View. However, I cannot see the message.

View1 shows: {{message}}

View2 shows: trialview2 {{message}}

Why can't it bind the model to the view?Please give some thoughts on what to do...

I see two problems. First, you did not close the <script> tag. second, MainController.js is defined incorrectly. Make it: <script src="~/Scripts/App/controller/MainController.js"></script>. If you have solved this issue, please post your answer. — William Callahan
– William Callahan, Commented Jan 15, 2016 at 2:46

William Callahan · Accepted Answer · 2016-01-15 02:48:26Z

The code seems to be missing a few things. I assume that you are using Razor. Here are some corrections:

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

NOTE: This is an old post; it may have been solved already.

mainguy · Accepted Answer · 2014-02-06 15:00:01Z

0

When using angular routing you can only have one view per app. It should be definded as:

<div ng-view></div>

This one and only view will receive the controler and partial of your route request. Everything else has to be handled in your partial and its assigned controller, which can itself have multiple controllers.

If you realy need multiple/nested views you should look at UI-Router

answered Feb 6, 2014 at 15:00

mainguy

8,3312 gold badges34 silver badges40 bronze badges

2 Comments

user2756589 Over a year ago

The index.cshtml is my main view..view1 and view2 are just partial views like about or contacts page

William Callahan Over a year ago

(Justification for down vote) The problem shows only one ng-view.

Collectives™ on Stack Overflow

view model(scope) not binding to the view(html) when routing using angularjs ngRoute

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related