Loading dynamically pages into div using angularJS

Question

I'm trying to load pages dynamically into a div using a select

My HTML code :

<div ng-app="App"  ng-controller="ProjectCtrl">
   <div>
      <select ng-model="selectedType" class="form-control" ng-change="showContent()" ng-options="type as type.text for type in types"></select>

   </div>

   <div>
        <div ng-include src='getView()'></div>
   </div>
</div>

My JS code :

$scope.showContent= function() {
        $scope.getView = function() {
           return $scope.selectedType.value ;
        }
}

I got this error :

Error: [ng:areq] http://errors.angularjs.org/1.2.2/ng/areq?p0=Ctrl&p1=not%20a%20function%2C%20got%20undefined

P.S: My views use angularJS too, and the idea is to get my page(View) from the select. "Ctrl" is the control name of the loaded page

Firstly have you considered using the Angular $routeProvider with the ng-view directive? If you are however set on this implementation or are using ngview for something else: Can you give your full controller, and why is the getView() function nested in another function? — caffeinated.tech
– caffeinated.tech, Commented Feb 25, 2014 at 19:44
I found a way to reproduce this probem : plnkr.co/edit/zBagAdBgJlslULlKnkvW?p=preview (When you select url1 the example is broken and you got this error : Error: [ng:areq] errors.angularjs.org/1.2.13/ng/…) — Mils
– Mils, Commented Feb 25, 2014 at 22:08

Mr_Mig · Accepted Answer · 2014-02-25 19:45:16Z

2

src must evaluate to a String value, representing the URL to be included.

Still, your code is messy. You can:

remove showContent listener at all
remove getView function and leave the expression selectedType.value
selectedType.value must be a string, representing the URL

See here: http://jsfiddle.net/E9rH4/1/

Watch the console error (see the url it tries to fetch).

answered Feb 25, 2014 at 19:45

Mr_Mig

7835 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mils Over a year ago

This work fine but still the same error, the problem because the url loaded use another controller...

Mils Over a year ago

I found a way to reproduce this probem : plnkr.co/edit/zBagAdBgJlslULlKnkvW?p=preview (When you select url1 the example is broken and you got this error : Error: [ng:areq] errors.angularjs.org/1.2.13/ng/…)

Mr_Mig Over a year ago

If you need to load a new view, and not a new template - you should use ng-view directive and ngRoute module, see here: docs.angularjs.org/tutorial/step_07

Mr_Mig Over a year ago

And it is not a good idea to load a whole new page - including <html> and <body> tags. You should reconsider the approach: 1. Use ngRoute 2. Declare all controllers in one app module 3. Setup the routing using separate controllers and views It will be easier and more maintainable.

Jonathan Rowny · Accepted Answer · 2014-02-25 22:31:34Z

1

Looks like $scope.selectedType.value is returning null. Try console.logging $scope.selectedType to see what you get. The function should return the full path.

Update After reviewing the plnk, it appears that you're trying to load an entire Angular app via ng-include. That's not what ng-include does, it just includes small templates. Here is the working plnkr

edited Feb 25, 2014 at 22:31

answered Feb 25, 2014 at 19:43

Jonathan Rowny

7,5981 gold badge21 silver badges26 bronze badges

6 Comments

Mils Over a year ago

I tried already console.log($scope.selectedType.value) and I have the good name of my page! Thanks btw

Jonathan Rowny Over a year ago

you need more than the name, you need the actual path.

Mils Over a year ago

I think I need to load the controller too for the new page loaded! For this reason I get this error

Jonathan Rowny Over a year ago

You do not need another controller.

Jonathan Rowny Over a year ago

Mils, that example is very messed up. You're loading a whole app into ng-include. That's not how ng-include works. You load a small template, just a bit of code. Check out this plnk: plnkr.co/edit/nq1AFBaamW3xycSa98uw?p=preview it all works like you expect it to.

|

Collectives™ on Stack Overflow

Loading dynamically pages into div using angularJS

2 Answers 2

4 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related