Angular JS 中带有 Ng-Include 的未定义函数

Question

我在 AngularJs 中遇到一个未定义函数的问题，我在互联网上没有找到任何合适的解决方案：我尝试建立一个单页网站。一些选项卡嵌套在 index.html 中，带有 ng-include。

如果我打开 tab1.html allone，angular 功能将按预期工作。但是，如果我打开 index.html（带有嵌入式 tab1.html），函数未定义并且 angular 函数不再工作。

如果有人能帮助我，我将不胜感激！！！

-下面的代码-

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

Answer 1

您不能在 ng-app 中定义 ng-app，并且您绝对不能在同一个 html 页面上有多个 <body> 标签，这当 angular 将 tab1.html 模板注入到您的 index.html.

时，这正是发生的事情

如果 tab1.html 只是主视图 app 中的一个视图，它不能采用

的形式

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

但更像是：

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

当然还要将 tableapp 模块注入主 IndexPage 模块。

Angular JS 中带有 Ng-Include 的未定义函数

Undefined Function with Ng-Include in Angular JS

html

javascript

angularjs

angularjs-ng-include