2016-03-21 17 views
2

AngularJs tanımlanmamış bir işlev ile bir sorunla karşı karşıyayım ve internette herhangi bir uygun bir çözüm bulamadım: Tek bir sayfa web sitesi oluşturmaya çalışıyorum. Birkaç sekme, ng-include ile index.html içine yerleştirilmiştir.Açıklamalı JS ile İçerme Fonksiyonu JS

Tab1.html açıldığında, açısal işlevler beklendiği gibi çalışır. Ancak, index.html dosyasını (katıştırılmış tab1.html ile) açarsanız, işlev tanımsızdır ve açısal işlev dos anaymore çalışmaz.

Bana yardım ederse çok minnettar olurum !!!

-Kodu index.html

aşağıda-

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

Eğer tableapp modülünü içerecek şekilde index.js'de yazmıyorsunuz, bağımlılık olarak eklemeyi deneyin –

+0

Neden "IndexPage" öğesini iki kez tanımlıyorsunuz? (index.js ve index.html) –

+0

script etiketini index.html dosyasından kaldırın ve script include etiketiyle değiştirin .. index.js'yi dahil etmek ... yapmak için ilk şey olurdu .. – damitj07

cevap

1

Bir ng-app içinde bir ng-app tanımlamak olamaz ve kesinlikle aynı html sayfada birden <body> etiketine sahip olamaz ve bu happends neyi exacltly olduğunda açısal enjekte eder senin index.html içine tab1.html şablonu. tab1.html Eğer

senin ana app içeride sadece bir görünümdür, bu

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

şeklinde Ama daha böyle değil edebilirsiniz:

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

Ve tabii ki tableapp enjekte Ana IndexPage modülüne modül.

+0

Çok teşekkür ederim, bu bana çok yardımcı oldu. Şimdi kodum çalışıyor! –

+0

Duyduğuma sevindim :) – Daniel