Search code examples
angularjsangularjs-scopeangularjs-routing

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

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

Solution

  • 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.