2016-04-29 8 views
1

Ich habe zwei Module A und B. Es wird Controller in moduleA moduleAController genanntSiehe Controller-Submodul AngularJS

Wie kann ich den Controller in moduleA in meinem html aufrufen?

Unten ist das Code-Snippet, aber es funktioniert nicht. Ich möchte nur meinen Controller direkt in meinem HTML verwenden.

var moduleA =angular.module("ModuleA"); 
var moduleB =angular.module("ModuleB",["moduleA"]); 
var myapp=angular.module("MyApp",["moduleB"]) 

<html ng-app="myapp"> 
    <body ng-controler="moduleAController"> 

    </body> 
</html> 

Antwort

1

Duplikat dieser: how to reference a controller inside a sub-module in angularjs

eine andere Lösung ist hier:

angular.module('myApp', []); 
angular.module('myApp.myModule'); 

    angular.module('myApp.myModule') 
     .constant('myModuleConst', { 
    partialPath: 'path/to/partials/' 
     }); 


    angular.module('myApp', [ 
     'myApp.nonsense', 
     'myApp.apparel', 
     'myApp.sounds', 
     'myApp.people']); 

hier ist refer ce document: https://www.safaribooksonline.com/blog/2014/03/27/13-step-guide-angularjs-modularization/

0

Sie haben viele Tippfehler im Code. Dinge wie "myapp" und "MyApp", "modulB" und "ModuleB" sind nicht gleich und müssen konsistent sein. Die korrekte ModuleA-Definition sollte angular.module("ModuleA", []) lauten.

Sobald Sie diese Probleme zu beheben, wird es funktionieren:

var moduleA = angular.module("ModuleA", []); 
 
moduleA.controller('moduleAController', function($scope) { $scope.name = 'controllerA'}) 
 

 
var moduleB = angular.module("ModuleB", ["ModuleA"]); 
 
var myapp = angular.module("MyApp", ["ModuleB"])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<html ng-app="MyApp"> 
 
    <body ng-controller="moduleAController"> 
 
    {{ name }} 
 
    </body> 
 
</html>

0

Sie haben einige Tippfehler, Probleme mit Kamelfällen und Sie haben nicht wirklich Ihren gesamten Code gepostet (seit Sie deklarierte Module verwenden).

Wie auch immer, hier ist ein funktionierendes Beispiel:

Html:

<div ng-app="myapp"> 
    <div ng-controller="moduleAController as moduleACtrl"> 
    <span>{{moduleACtrl.test}}</span> 
    </div> 
    <div ng-controller="moduleBController as moduleBCtrl"> 
    <span>{{moduleBCtrl.test}}</span> 
    </div> 
    <div ng-controller="appController as appCtrl"> 
    <span>{{appCtrl.test}}</span> 
    </div> 
</div> 

JS:

angular.module("moduleA", []).controller('moduleAController', function() { 
    this.test = 'Works - Module A'; 
}); 

angular.module("moduleB", ["moduleA"]).controller('moduleBController', function() { 
    this.test = 'Works - Module B'; 
}); 

angular.module("myapp", ["moduleB"]).controller('appController', function(){ 
    this.test = 'Works - App Controller'; 
}); 

JSFIDDLE.

0

Sie einen Schreibfehler aufweist, ist auch dort fehlt Abhängigkeits-Array in der Definition von ModuleA.

var moduleA = angular.module("ModuleA",[]); 
moduleA.controller('moduleAController',function($scope){ 
    console.log('moduleAController'); 
}); 

var moduleB = angular.module("ModuleB",["ModuleA"]); 
var myapp=angular.module("MyApp",["ModuleB"]); 

können Sie auf plunker verweisen https://plnkr.co/edit/sBdu1J?p=preview