Come bind i controller contenuti in una cartella alle visualizzazioni in angularjs dynamicmente

Ho un controller in una cartella denominata controller alla radice. Ho la vista che desidero albind alle viste corrispondenti quando cambia il path. Sto usando angular-ui-router.

controllori / one.js

angular.module('sub',["ui.router"]).config(function($stateProvider){ $stateProvider .state('index', { url: "/login", views: { "viewA": { templateUrl: "login.html" } } }) .state('register', { url: "/register", views: { "viewA": { templateUrl: "register.html" } } }) .state('upload', { url: "/upload", views: { "viewA": { templateUrl: "upload.html" } } }) }) 

test.html

  <!DOCTYPE html> <html ng-app="sub"> <head> <title>AngularJS: UI-Router Quick Start</title> <!-- Bootstrap CSS --> <link href="bootstrap.min.css" rel="stylesheet"> </head> <body class="container"> <div class="navbar"> <div class="navbar-inner"> <a class="brand" ui-sref="index">Quick Start</a> <ul class="nav"> <li><a ui-sref="index">Home</a></li> <li><a ui-sref="register">Register</a></li> <li><a ui-sref="upload">upload</a></li> </ul> </div> </div> <div class="row"> <div class="span6"> <div class="well" ui-view="viewA"></div> </div> </div> <script type="text/javascript" src="angular.min.js"></script> <script type="text/javascript" src="Controllers/one.js"></script> <script type="text/javascript" src="angular-cookies.js"></script> <script type="text/javascript" src="Controllers/loginController.js"></script> <script type="text/javascript" src="Controllers/uploadController.js"></script> <script type="text/javascript" src="Controllers/registerController.js"></script> <script type="text/javascript" src="angular-ui-router.js"></script> <script type="text/javascript" src="jquery-2.1.3.min.js"></script> </body> </html> 

login.html

 <div ng-controller="loginController"> <p> UserName: <input id="director" type="text" ng-model="mUserName"/> </p> <p> Password: <input id="actor" type="text" ng-model="mPassWord"/> </p> <button ng-click="login()">Login</button> </div> 

Controller / LoginController.js

 angular.module('subsd',["ngCookies"]).controller('loginController', ['$http','$scope','$cookies',function($http,$scope,$cookies) {})]); 

Se si menziona 'sub' invece di 'subsd' in loginController.js, l'instradamento smette di funzionare.

La risposta finale include poche cose da fare:

  1. Rimuovi <div ng-controller="loginController"> dal file di model login.html .
  2. Spostare la dipendenza 'ngCookies' dalla definizione del sub nel file controller / one.js ( angular.module('sub',["ui.router", "ngCookies"]) ).
  3. Nel file controller / logincontroller.js modificare il nome del module da subsd a sub back e rimuovere il secondo argomento da invocare il module sub , per far sembrare questo: angular.module('sub').controller(...) .

Quando hai cambiato il nome del module prima, stai cercando di definirlo nuovamente, che è un errore.

Questo

 angular.module('moduleName', [...dependencies]) 

è il setter di moduli, mentre questo

 angular.module('moduleName') 

è il module getter .

Vuoi dire:

 $stateProvider .state('index', { url: "/login", views: { "viewA": { templateUrl: "login.html", // THIS ? controller: "LoginController" } } }) }) 

Ricorda inoltre di rimuovere l'attributo del ng-controller dalla vista.