Angular UI-router没有加载我的控制器

时间:2015-12-10 22:59:56

标签: javascript ruby-on-rails angularjs angular-ui-router

所以如果重要的话,我在轨道中使用角度。是的,我的链轮是正确的。所以我的模板和路线正确加载。但我的控制器虽然加载不是由ui-router发现或被忽略。我用了很长时间

纳克控制器=" mainctrl"

在我的应用程序中解决问题并将其推到一边,但现在我需要在路由中加载控制器并且它无法正常工作。所以这是我的路线文件。

app.config(['$stateProvider','$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
  $stateProvider
  // The home routes are at the top of the page.
  .state('home', { // This is our navbar, it leads to all of our login screens
    url: '/home',
    templateUrl: 'home/nav.html',
    authenticate: true,
    controller: 'AuthCtrl'
  })
.state('login', {
  url: '/login',
  templateUrl: 'home/login.html',
  authenticate: false,
  contoller: 'AuthCtrl'
//   controller: function($scope) {
//     $scope.usererror_hide = true;
//     $scope.passworderror_hide = true;
//  }
})

 $urlRouterProvider.otherwise("/login");

现在有点疯狂的是,如果我取消注释该控制器:功能逻辑它的工作原理。但由于某种原因,它无法找到我的AuthCtrl。所以我不确定它是否存在轨道问题或路由问题,因为它们似乎都在运行。

这是我的控制器文件,但我不相信它是问题的根源。

var app= angular.module('planoxApp')


  app.controller('AuthCtrl',['$http','$scope', '$localStorage',  //be careful with the order of http/scope, they get screwey
  '$stateParams','$filter','$state','AuthService','$uibModal',
  function($http,$scope,$localStorage, $stateParams,$filter,$state,AuthService,$uibModal){

    $scope.selectedGlobal = "" //For our future global search, move it to nav
    $scope.datas = [] //For global crap, move to nav

    //My variable collections that I need access too
    $scope.usererror_hide = true;
    $scope.passworderror_hide = true;

我的application.js文件

//=require jquery
//=require jquery_ujs
//=require jquery-ui
//=require jquery-minicolors
//=require tinycolor
//=require bootstrap
//=require angular
//= require angular-route
//=require angular-rails-templates
//require angular-minicolors
//=require angular-animate
//=require angular-bootstrap
//require angular-bootstrap/ui-bootstrap-tpls-0.14.3.js
//=require lodash
//=require angular-resource
//=require holderjs
//=require angular-holderjs
//=require restangular
//=require angular-dragdrop
//=require angular-strap
//=require nya-bootstrap-select
//=require angular-ui-router
//=require angular-ui-router.stateHelper
//=require angular-color-picker
//= require angular-xeditable
//=require angularjs-file-upload
//=require ngstorage
//= require_tree ./templates
// = require_tree .

和我的app.js文件

planoxApp= angular.module('planoxApp',
['ui.router',   
'templates',   
'nya.bootstrap.select', 
'ngAnimate',
'ui.bootstrap',  
'main-directives',
'color.picker',   
'xeditable',     
'restangular', 
'ngDragDrop', 
'angularFileUpload',
'ngStorage', 
'ngHolder',
'ngResource'
// 'mgcrea.ngStrap',
// 'mgcrea.ngStrap.typeahead',
// 'mgcrea.ngStrap.tooltip',
// 'mgcrea.ngStrap.helpers.parseOptions',

])

最后是实际的html文件,加载得很好。

<div id="login" >
  <div class="container">
    <div class="row vertical-offset-100">
    <div class="col-md-4 col-md-offset-4">
      <div class="panel panel-default">
        <div class="panel-body">
          <h1> PlanoX</h1>
          <h4> A Catchy Line About PlanoX. </h4>
          <form accept-charset="UTF-8" role="form">
                  <fieldset>
              <div class="form-group">
                <input class="form-control" placeholder="E-mail" name="email" type="text"  ng-model="login_username">
                  <p ng-hide="usererror_hide"> This email is not in our system, please try again or contact planomatic <p>
            </div>
            <div class="form-group">
              <input class="form-control" placeholder="Password" name="password" type="password" value="" ng-model="login_password">
                <p ng-hide="passworderror_hide"> This password is not in our system, please try again or contact planomatic <p>
            </div>
            <div class="checkbox">
                <label>
                  <input name="remember" type="checkbox" value="Remember Me"> Remember Me
                </label>
              </div>
            <input class="btn btn-primary btn-block" type="submit" value="Login" ng-click="CheckUser(login_username, login_password)">
          </fieldset>
            </form>
            <p>© 2015 PlanoX LLC | 888-988-PlanoX (3453) | info@PlanoX.com</p>
        </div>
    </div>
  </div>
  </div>
</div>
</div>

如果有人能帮助我,我会非常感激,过去一周我一直在努力。

- - - - - - - - 更新

所以这只是一个拼写错误的问题,但我想发布另一个我错误的问题虽然和这个问题一样。但事实证明是完全不同的。这不是在嵌套视图中访问控制器的正确方法。

.state('home.index', {       // our home page for employee standard
  url: '/index',
  controller: 'HomeCtrl',
  views:{
    "":{  templateUrl: 'home/home.html'},
    "assembly@home.index":{  templateUrl: 'home/assembly.html'},
    "client@home.index":{ templateUrl: 'home/client.html'},
    "photoplan@home.index":{ templateUrl: 'home/photoplan.html'}
  },
  authenticate: true
controller: 'HomeCtrl'
})

这是访问它的正确方法。

 .state('home.index', {       // our home page for employee standard
      url: '/index',
      controller: 'HomeCtrl',
      views:{
        "":{  templateUrl: 'home/home.html',
              controller: 'HomeCtrl'},
        "assembly@home.index":{  templateUrl: 'home/assembly.html'},
        "client@home.index":{ templateUrl: 'home/client.html'},
        "photoplan@home.index":{ templateUrl: 'home/photoplan.html'}
      },
      authenticate: true

    })

以后如果有人看到这个问题并且遇到类似的问题,那就是这种情况。

1 个答案:

答案 0 :(得分:1)

设置控制器时检查拼写错误:

.state('login', {
  url: '/login',
  templateUrl: 'home/login.html',
  authenticate: false,
  controller: 'AuthCtrl'
})

续的 - [R 奥勒