2016-03-21 11 views
2

AngularJsで未定義の関数に問題があり、インターネット上でフィッティングソリューションを見つけられませんでした。 1ページのWebサイトを構築しようとしています。いくつかのタブは、index.htmlにng-includeとともにネストされています。Angular JSにNg-Includeを含む定義されていない関数

私がtab1.htmlを開くと、すべての角度関数が期待通りに機能します。 しかし、index.html(tab1.htmlが埋め込まれている)を開くと関数は定義されておらず、角度関数はあまり機能しません。

誰かが私を助けることができたらとても感謝しています!

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

below-

-code 10

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

tableappモジュールをインクルードするようにindex.jsに指示していないので、それを依存関係として追加してみてください。 –

+0

なぜ 'IndexPage'を2回定義していますか? (index.jsとindex.html) –

+0

index.htmlからscriptタグを削除し、それをscript includeタグに置き換えます。index.jsをインクルードするには...まず最初に行うことです。 – damitj07

答えて

1

あなたはng-app内部ng-appを定義することはできません、とあなたは間違いなく同じhtmlページに複数<body>のタグを持つことができない、これは角度があなたのindex.htmltab1.htmlテンプレートを注入する際happends何exacltlyです。

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モジュールに追加します。

+0

ありがとう、これは私を大いに助けました。今、私のコードが動作しています! –

+0

嬉しいです:) – Daniel

関連する問題