Question

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

如果我打开tab1.html，则角度函数按预期工作。但是，如果我打开index.html（使用嵌入式tab1.html），函数是未定义的，并且角度函数dosn不再工作。

如果有人可以帮助我，我会非常感激!!!

- 下面的代码 -

的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，并且您绝对不能在同一个<body>页面上拥有多个html代码，这很可取当角度将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的未定义函数

1 个答案: