Winkelregler Bindung nicht

sehen Ich habe einen Winkel Controller definiert so etwas wieWinkelregler Bindung nicht

mainCtrl.js

angular.module("mainCtrl", []) 

.controller("mainController", function ($rootScope, $location, Auth) { 

    var vm = this; 
    vm.testStr = "If you see this, mainController is active on your page"; 
    . 
    . 
    .

Hier Auth ist ein Winkel Service definiert Authentifizierung zu handhaben und es ist nicht setzen die testStr Variable hinter der Authentifizierung.

eine Ansicht definiert versucht die Variable testStr als Gebrüll

index.html

<html> 
<head> 
<base href="/"> 

<!-- load angular and angular-route via CDN --> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.js"></script> 

</head> 
<body ng-app="userApp" ng-controller="mainController as main"> 

<main class="container"> 
    <!-- ANGULAR VIEWS --> 
    <div><h3>{{main.testStr}}</h3></div> 
    <div ng-view></div> 
</main> 

</body> 
</html>

Aber zu binden, wenn der Index den Wert von testString geladen wird, nicht auf der Seite erscheinen. Stattdessen erscheint {{main.testStr}}.

Ich nehme an, es ist kein Muss zu verwenden $scope und konnte nicht finden, was ich falsch mache.

Vielen Dank im Voraus, für Ihre Hilfe.

bearbeiten

Es gibt auch andere Dateien beteiligt, dass ich hier nicht erwähnt habe. Jetzt kann ich ihre Relevanz sehen.

Die App-Modul, app.js

angular.module("userApp", ["ngAnimate", "app.routes", 
    "authService", "mainCtrl", 
    "employeeCtrl", "employeeService"]) 

// application configuration to integrate token into requests 
.config(function ($httpProvider) { 

    // attach our auth interceptor to the http requests 
    $httpProvider.interceptors.push("AuthInterceptor"); 

});

Modul für das Routing app.route.js

angular.module("app.routes", ["ngRoute"]) 

.config(function ($routeProvider, $locationProvider) { 

    $routeProvider 

    // route for the home page 
     .when("/", { 
      templateUrl: "app/views/pages/home.html" 
     }) 

     // login page 
     .when("/login", { 
      templateUrl: "app/views/pages/login.html", 
      controller: "mainController", 
      controllerAs: "login" 
     }) 

     // show all employees 
     .when("/employees", { 
      templateUrl: "app/views/pages/employees/all.html", 
      controller: "employeeController", 
      controllerAs: "employee" 
     }) 

     // form to create a new user 
     // same view as edit page 
     .when("/employees/create", { 
      templateUrl: "app/views/pages/employees/single.html", 
      controller: "employeeCreateController", 
      controllerAs: "employee" 
     }) 

     // page to edit a user 
     .when("/employees/:employee_id", { 
      templateUrl: "app/views/pages/employees/single.html", 
      controller: "employeeEditController", 
      controllerAs: "employee" 
     }); 

    $locationProvider.html5Mode(true); 

});

Quelle

2016-05-07 Sime

Sie haben den Namen des Moduls als mainCtrl

erklärt

angular.module("mainCtrl", [])

aber ng-App als userApp

ändern Modul wie diese verwenden,

angular.module("userApp", [])

Quelle

2016-05-07 12:45:49 Sajeetharan

Ich glaube, ich nicht genug Details früher zur Verfügung gestellt haben. Was denkst du nach dem Schnitt? – Sime

sollten Sie Controller nicht als Abhängigkeit zu einem Modul injizieren! – Sajeetharan

meinst du die Module in der app.js injiziert? Könntest du mir vorschlagen, wie ich das vermeiden kann? Ich wollte eine Art Trennung zwischen "Komponenten" machen und sie schließlich in der App sammeln. – Sime

Ihr Modulname ist falsch. Es sollte userApp statt mainCtrl sein. Sehen Sie ein funktionierendes Beispiel unten:

var myApp = angular.module("userApp", []); 
 

 
myApp.controller("mainController", function($scope) { 
 
    var vm = this; 
 
    vm.testStr = "Hello"; 
 
});

<html> 
 

 
<head> 
 
    <base href="/"> 
 

 
    <!-- load angular and angular-route via CDN --> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.js"></script> 
 

 
</head> 
 

 
<body ng-app="userApp" ng-controller="mainController as main"> 
 

 
    <main class="container"> 
 
    <!-- ANGULAR VIEWS --> 
 
    <div> 
 
     <h3>{{main.testStr}}</h3> 
 
    </div> 
 
    <div ng-view></div> 
 
    </main> 
 

 
</body> 
 

 
</html>

Quelle

2016-05-07 12:53:20

Ich denke, ich habe vorher nicht genug Details zur Verfügung gestellt. Was denkst du nach dem Schnitt? – Sime

Sind Sie sicher, Angular wird korrekt geladen, weil das einzige Problem, das ich sehe, der HTML5-Modus –

ist, wie kann ich das überprüfen? – Sime

Winkelregler Bindung nicht

Antwort

Verwandte Themen