Undefined Function with Ng-Include in Angular JS

Question

I'm facing a problem with an undefined function in AngularJs and I didn't find any fitting solution on the internet: I try to build a single page website. A few tabs are nested in the index.html with ng-include.

If i open the tab1.html allone the angular-functions work as expected. But if i open the index.html (with the embedded tab1.html) the function is undefined and the angular function dosn't work anaymore.

I would be very thankful if someone could help me!!!

-code below-

index.html

<!--Tab-Container-->
<div lang="en" ng-app="IndexPage" ng-cloak class="tabsdemoDynamicHeight" ng-cloak="">
<md-content>
    <md-tabs md-dynamic-height="" md-border-bottom="">

        <!-- Content TAB 1 -->
          <md-tab label="Tab1">
            <md-content class="md-padding">
                <div ng-include src="'views/tab1.html'"></div>
            </md-content>
          </md-tab>           

        <!-- Content TAB 2 --> 
        ...

      </md-tabs>      
</md-content>
</div>
<script type="text/javascript">angular.module('IndexPage', ['ngMaterial']);</script>

index.js

angular.module('IndexPage',['ngMaterial', 'ngMessages', 'material.svgAssetsCache']);

tab1.html

<body>
<div ng-app="tableapp" ng-controller="Ctrl" >
            <a href="#" editable-text="user.name">{{ user.name || "empty" }}</a>
        </div>
</body>

tab1.js

var tableapp = angular.module("tableapp", ["xeditable"]);

tableapp.run(function(editableOptions) {
  editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default'
});

tableapp.controller('Ctrl', function($scope) {
  $scope.user = {
    name: 'awesome user'
  };  
});

You are not telling in index.js to include the tableapp module, try adding it as a dependency — A. Romeu
– A. Romeu, Commented Mar 21, 2016 at 8:32
Why are you defining IndexPage twice? (index.js and index.html) — Asim K T
– Asim K T, Commented Mar 21, 2016 at 9:01
remove the script tag from index.html and replace it with script include tag.. to include index.js ...would be first thing to do .. — damitj07
– damitj07, Commented Mar 21, 2016 at 9:19
Also you are creating 2 seperate modules and app (viz. tableapp & IndexPage) .. no need to do it as well . Just include the tabs module in your main app.. — damitj07
– damitj07, Commented Mar 21, 2016 at 9:22
Thanks for your fast help. I merged the index.js and tab1.js; I removed the redundant IndexPage definition but the error is still the same. How do I exactly add a dependency to the IndexPage module? — Jonas Scholz
– Jonas Scholz, Commented Mar 21, 2016 at 11:01

Daniel · Accepted Answer · 2016-03-21 11:43:19Z

1

You can't define an ng-app inside an ng-app, and you definitely can't have multiple <body> tags on the same html page, and this is exacltly what happends when angular injects tab1.html template into your index.html.

If tab1.html is just a view inside your main app, it can't be in the form of

<body>
   <div ng-app="tableapp" ng-controller="Ctrl" >
            <a href="#" editable-text="user.name">{{ user.name || "empty" }}</a>
   </div>
</body>

But more like:

<div>
   <div ng-controller="Ctrl" >
            <a href="#" editable-text="user.name">{{ user.name || "empty" }}</a>
   </div>
</div>

And of course inject the tableapp module to your main IndexPage module.

edited Mar 21, 2016 at 11:43

answered Mar 21, 2016 at 11:38

Daniel

6,5517 gold badges38 silver badges64 bronze badges

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

1 Comment

Jonas Scholz Over a year ago

Thank you very much, this helped me alot. Now my code is working!

Collectives™ on Stack Overflow

Undefined Function with Ng-Include in Angular JS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related