0

I've a SPA.html [Single Page Application].

<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
        <script src="angular.min.js"></script>
        <script src = "angular-route.js"> </script>
        <script>
                (function () {
                var demoApp = angular.module('demoApp',['ngRoute']);
                    demoApp.config(['$routeProvider', function ($routeProvider) {
                                $routeProvider
                                        .when('/index',
                                        {
                                        controller : 'SimpleController',
                                        templateUrl : 'Partials/index.html'
                                        })
                                        .when('/fixed',
                                        {
                                        controller : 'SimpleController',
                                        templateUrl : 'Partials/fixed.html'
                                        })
                                        .when('/calculated',
                                        {
                                        controller : 'SimpleController',
                                        templateUrl : 'Partials/calculated.html'
                                        })
                                        .otherwise({redirectTo : '/index'});
                                        }]);
                }());
        </script>

</head>
<body>
Click : <input ng-model="name"/> {{name}}

        <a href="#/index">index </a>
        <a href="#/fixed">fixed </a>
        <a href="#/calculated">calculated </a>
        <br />
        Placeholder
        <div ng-view></div>
</body>
</html>

When clicking on any of the links a partial html gets loaded in view. Say my index.html under Partial folder is :

<script src="angular.min.js"> </script>
<div ng-app="">
<div class="container" >
                <input type="text" ng-model="name" />
                Label: : {{name}} <br>
</div>
</div>

So, clicking on index loads the above partial but instead of databinding I get {{name}} on web page but when I directly open index.html it works fine.

What am I missing on? I've copied angular.min.js in Partials.

surbhi bakshi
  • 160
  • 1
  • 1
  • 17
  • Templates shouldn't have their own ng-app and don't need to re-include angular.js; they should only contain the html you want injected into the directive node (in this case the ng-view). – Daniel Beck Sep 18 '15 at 15:50

1 Answers1

0

I have created a Plnkr example to demonstrate how you can achieve this.

http://plnkr.co/edit/yn7fhx6p1DU99ILb8mSg

<!DOCTYPE html>
    <html ng-app="plunker">

    <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');      </script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js" data-semver="1.0.7"></script>
    <script src="app.js"></script>
    </head>

   <body ng-controller="MainCtrl">

     <a href="#/resolveView">Resolve View</a>

   <div ng-view></div>

 </body>
</html>

Js 

var app = angular.module('plunker', []);

  /*
  angular.module('controllers', [])
    .controller('myCtrl', [function($scope, resolvedVal) { $scope.answer = resolvedVal; }]);
  */

  app.config(['$routeProvider', function($routeProvider) {
      $routeProvider
        .when('/resolveView', {
          templateUrl: 'resolveView.html',
          controller: 'MainCtrl'
        }
      );
   }]);

app.controller('MainCtrl', function($scope, $location) {
   $scope.name = "Hello World";
 });
cullimorer
  • 755
  • 1
  • 5
  • 23
  • Hey! thanks. Can you help me with another thing? Like I've 2 partials, one has a text box and another wants to display the input in that text box. How will I achieve that? By $cookieStore or some other method? Also, if I'm moving between partials, I want input in text box to stay intact. How to do this? – surbhi bakshi Sep 21 '15 at 07:06
  • No worries. There are a number of ways you can achieve this, but personally I would have them share a controller and thereby sharing their scope, meaning you can access the model on both the parent and partial views. Here's a Plnkr: http://embed.plnkr.co/yn7fhx6p1DU99ILb8mSg/preview – cullimorer Sep 21 '15 at 09:52
  • well, this is working between the parent and the partial. I want it to work between 2 partials. if you go to the example created by you, I have added another partial called preview.html which has a textbox 'hello'. I want to display 'hello' in another partial resolveView.html. As I'm new to plunker, I'm not sure whether my changes are reflecting for you or not. – surbhi bakshi Sep 21 '15 at 10:56
  • Unfortunately that's not how Plunker works :), I've updated my plunker now to use the same model as the other. http://plnkr.co/edit/yn7fhx6p1DU99ILb8mSg?p=preview – cullimorer Sep 21 '15 at 14:41
  • you're not quite getting my doubt: Both partials have

    View 2: {{name}}

    in your code and parent has . Feature I want is one of the partial to have and the other one {{name}}. And when I navigate between partials, I see data bound value of name on 2nd partial.     – surbhi bakshi Sep 21 '15 at 15:06
  • Oh ok now I get what you mean. Controllers are disposed when you change routes. Angular isn't designed to carry data between views, instead we use Services/Factories to handle this. There's a good answer on this Stack question, http://stackoverflow.com/questions/16210822/angular-js-views-sharing-same-controller-model-data-resets-when-changing-view. Otherwise here's an updated Punker that might help: http://plnkr.co/edit/yn7fhx6p1DU99ILb8mSg?p=preview – cullimorer Sep 22 '15 at 10:17