CODEWITHSUNDEEP
angularjsangularjs-scopeangularjs-routing
user2756589
user2756589

Reputation: 431

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

Upvotes: 0

Views: 996

Answers (2)

William Callahan
William Callahan

Reputation: 639

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.

Upvotes: 1

mainguy
mainguy

Reputation: 8331

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

Upvotes: 0

Related Questions