CODEWITHSUNDEEP
angularjs
dragonmnl
dragonmnl

Reputation: 15538

ng-include and ngRoute: how to make them work together? (i.e. route to a view wihin a ng-include)

[EDITED] My app has the following structure:

index.html

<body ng-app = "myApp" ng-controller ="mainController">
    <ng-view></ng-view>
</body>

mainView.html (loaded into ng-view through routeProvider in app.js)

<div ng-include src="subview1">
<div ng-include src="subview2">

subview1 and subview2 are set within mainController (mainView's controller) as scope variables:

$scope.subview1= "templates/subview1.html";
$scope.subview2= "templates/subview2.html";

controller1 and controller2 are subview1 and subview2's controllers.

subview1.html (loaded in first div of mainView)

 <div ng-controller="controller1">
    <button ng-click="loadNewView()"></button>
 </div>

controller1.js

.controller('controller1', function($scope){
     $scope.loadNewView = function(){
            $scope.$parent.subview1 = "templates/view3.html";
     }
}

scope.loadNewView should load a different view (and relative controller) within the div with src="subview1" in mainView.html). Basically it's about refreshing the view itself by raplacing it with another view (and related controller).

I use $parent to update the view in subview1's parent view (i.e. mainView).

however nothing happens and if I try to use $scope.$apply() I get error (digest already in progress).

Any clue?

Upvotes: 2

Views: 11149

Answers (4)

Ritt
Ritt

Reputation: 3339

This answer is regarding your updated question.

The solution which you had used before,will load all temlplate and once in ng-include and its associated controller making the mainController as parent.

But if you want to load a different view with its newController then you can try something like this.

Just add one more route and call on your event click,but remember this newView's Controller will have no parent-child relation with the mainView's controller.

var app = angular.module("app",[]);
  app.config(function($routeProvider){
      $routeProvider
      .when('/main',{
         templateUrl:"mainView.html",
         controller:mainController
       })
       .when('/anyName',{
         templateUrl:"templates/view3.html",
         controller:temp3Controller
       })
  });

And in your controller1.js

.controller('controller1', function($scope){
     $scope.loadNewView = function(){
            $location.path('/anyName');
     }
}

Inject location service in controller1.

Upvotes: 1

dragonmnl
dragonmnl

Reputation: 15538

I finally found the solution.

The tricks is using

$scope.$parent.$parent.subview1 = "templates/view3.html";

instead of

$scope.$parent.subview1 = "templates/view3.html";

since, basically:

  • ng-include is the child of mainView
  • subview1 is the child of ng-include

Upvotes: 0

Ritt
Ritt

Reputation: 3339

Okay,so using routeProvider,you can use it like this

var app = angular.module("app",[]);
  app.config(function($routeProvider){
      $routeProvider
      .when('/main',{
         templateUrl:"mainView.html",
         controller:mainController
       })
  });
  app.controller("mainController",function($scope){
  });
  app.controller("subView1Controller",function($scope){
  });
  app.controller("subView1Controller",function($scope){
  });

Then in your mainView.html,Load all the subview templates.

     <ng-include src="yoursubtemplate1path"></ng-include> 
 <ng-include src="yoursubtemplate2path"></ng-include>

And then in yoursubtemplate1 use

<div ng-controller="subView1Controller">
//Here your code
</div>

Same for the other templates.

You can set the template src of the subtemplates from your mainController.

 app.controller("mainController",function($scope){
$scope.templatesrc="/app/template1.html";
  });

And then use it in your template,where you are using ng-include directive.

<ng-include src="templatesrc"></ng-include>

Its better to store template url's in an array and use ng-repeat directive like i had stated before,if you are loading more templates.

And if you want to show the div on some button click lets say in parent controller then use ng-if in the sub-view main and make it true on button click.

Upvotes: 1

Ritt
Ritt

Reputation: 3339

you can try something like this... In your stateProvider or in your routeProvider if you using.

var mod = angular.module('example.states', ['ui.router']);

    mod.config(['$stateProvider', '$urlRouterProvider',
        function($stateProvider, $urlRouterProvider) {
            $stateProvider
                .state('exampleState', {
                    url: '/main',
                    templateUrl: 'mainView.html',
                    controller: mainController
                });
        }
    ]);
    return mod;

So here you have associated your parent controller(let's say the mainController which will be the parent of all others) with its template mainView.html.

Then in your mainView.html,Load all the subview templates.

<div ng-repeat="template in templates">
                <ng-include src="template.url"></ng-include>             
            </div>

templates is an array in your mainController which has the url or path of all your subtemplates.When you use ng-include inside the main template then all subTemplates will automaticlly become the child of the mainTemplate and its Controllers too.In a way it will inherit from the parent Controller.

So suppose if subView1.html is one of the template url you had given in ng-include.Then it will look like

<div ng-controller="subView1Controller">
//Here your code
</div>

And subview2 as

<div ng-controller="subView2Controller">
    //Here your code
    </div>

This way you will have multiple views on the same page with one url and different controllers with its associated templates and each will inherit from the parent controller which is mainController here.

There, might be better approach than this. This is what i had used in my project,and its simple to keep your code simple manage.

Upvotes: 3

Related Questions