CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-ng-include
Jonas Scholz
Jonas Scholz

Reputation: 35

Undefined Function with Ng-Include in Angular JS

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'
  };  
});

Upvotes: 2

Views: 599

Answers (1)

Daniel
Daniel

Reputation: 6481

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.

Upvotes: 1

Related Questions