current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite
1

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

share|improve this question
    
Are you missing a } for the $scope.getView function? –  Mike P Feb 25 '14 at 19:43
    
What's the types model look like? –  Jonathan Rowny Feb 25 '14 at 19:43
    
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? –  LcLk Feb 25 '14 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 Feb 25 '14 at 22:08

2 Answers 2

up vote 1 down vote accepted

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

share|improve this answer
    
I tried already console.log($scope.selectedType.value) and I have the good name of my page! Thanks btw –  Mils Feb 25 '14 at 19:46
    
you need more than the name, you need the actual path. –  Jonathan Rowny Feb 25 '14 at 19:56
    
I think I need to load the controller too for the new page loaded! For this reason I get this error –  Mils Feb 25 '14 at 20:19
    
You do not need another controller. –  Jonathan Rowny Feb 25 '14 at 20:45
1  
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. –  Jonathan Rowny Feb 25 '14 at 22:25
up vote 2 down vote

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

Still, your code is messy. You can:

  1. remove showContent listener at all
  2. remove getView function and leave the expression selectedType.value
  3. 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).

share|improve this answer
    
This work fine but still the same error, the problem because the url loaded use another controller... –  Mils Feb 25 '14 at 21:43
    
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 Feb 25 '14 at 22:07
    
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 Feb 26 '14 at 14:52
1  
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. –  Mr_Mig Feb 26 '14 at 14:56

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.