javascript - Loading dynamically pages into div using angularJS - Stack Overflow

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

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

• javascript
• angularjs
• html

Share Improve this question Follow edited Feb 25, 2014 at 20:06 Mils asked Feb 25, 2014 at 19:22 MilsMils 38866 silver badges2222 bronze badges 4

• Are you missing a } for the $scope.getView function? – Mike P Commented Feb 25, 2014 at 19:43
• What's the types model look like? – Jonathan Rowny Commented Feb 25, 2014 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? – 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/1.2.13/ng/…) – Mils Commented Feb 25, 2014 at 22:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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/E9rH4/1/

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

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