1. 首頁
  2. 問答
  3. 獨立angularJS控制器產生錯誤

獨立angularJS控制器產生錯誤

2016-01-25 118 views
0

我知道這已經要求在過去存在如下問題： How to create separate AngularJS controller files? Separate AngularJS Controllers Into Separate Files獨立angularJS控制器產生錯誤

但是，無論我不能夠解決問題。

我有以下內容的文件：

<!DOCTYPE html> 
<html ng-app="app"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
{!! HTML::script('libraries/admin/plugins/jQuery/jQuery-2.1.4.min.js') !!} 
{!! HTML::script('libraries/JS/jquery-ui-1.11.1/jquery-ui.min.js') !!} 

<!-- Bootstrap 3.3.5 --> 
{!! HTML::script('libraries/admin/bootstrap/js/bootstrap.min.js') !!} 
{!! HTML::script('libraries/JS/parsley/parsley.2.0.7.min.js') !!} 
{!! HTML::script('libraries/JS/sweetalert2-master/dist/sweetalert2.min.js') !!} 
{!! HTML::script('libraries/JS/angularjs/angular-1.4.8.min.js') !!} 
{!! HTML::script('libraries/JS/angularjs/angular-1.4.8-route.min.js') !!} 
{!! HTML::script('libraries/MyAngular/app.js') !! 
    </head> 
    <body> 
<div class="content-wrapper" ng-controller="mainController" ng-view>  
</div><!-- ./wrapper --> 
</body> 
</html>

的app.js包含下面的代碼：

var app = angular.module('app',['ngRoute']) 
    .config(function($interpolateProvider){ 
     $interpolateProvider.startSymbol('<%'); 
     $interpolateProvider.endSymbol('%>'); 
    }); 

app.config(function($routeProvider){ 
    $routeProvider 

     .when('/',{ 
      templateUrl: '/admin/pages/Dashboard', 
      controler :'mainController' 
     }) 
     .when("/index",{ 
      templateUrl: '/admin/pages/Dashboard', 
      controler :'mainController' 
     }) 
     .when("/activateLink",{ 
      templateUrl:'/admin/pages/verifyAccount', 
      controller:'mainController' 
     }); 

}); 

app.controller('mainController',['$scope','$templateCache','$route','$location',function($scope, $templateCache,$route,$location) { 
     // create a message to display in our view 
     //$scope.message = 'OK'; 
     //$templateCache.removeAll(); 
     $scope.clear = function(){ 
      //console.log("clicked"); 
      //console.log($route.current.originalPath); 
      $("#ActiveWarning").show(); 
      $templateCache.removeAll(); 
      $route.reload(); 
      $location.path($route.current); 
     } 

}]);

頁/admin/pages/verifyAccount包含以下腳本：

<div ng-controller="verifyAccountController"><% message %></div> 
<script> 
angular.module('app').controller('verifyAccountController', function($scope) { 
    $scope.message="Test!!!!"; 
}); 
</script>

問題是我得到以下錯誤：

Error: [ng:areq] http://errors.angularjs.org/1.4.8/ng/areq?p0=verifyacc&p1=not%20a%20function%2C%20got%20undefined 
G/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:6:416 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:22:131 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:22:218 
Xe/this.$get</<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:80:210 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:60:177 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:61:30 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:55:105 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:55:1 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:55:1 
K/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:54:249 
ngViewFillContentFactory/<[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.8-route.min.js:985:7 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:73:293 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:62:190 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:55:105 
K/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:54:249 
R/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:56:79 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:60:377 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.8-route.min.js:935:25 
lf/this.$get</[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:136:157 
commitRoute/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8-route.min.js:619:15 
f/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:119:129 
lf/this.$get</[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:133:309 
lf/this.$get</[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:130:404 
lf/this.$get</[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:134:76 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:87:442 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:92:50 
Uf/</[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:93:78 

<div class="content-wrapper ng-scope" ng-controller="mainController" ng-view="">

但是如果我在app.js，而不是添加控制器「verifyAccountController」'/管理/頁/ verifyAccount頁面它完美的作品。

我已經嘗試了鏈接中描述的所有解決方案，但錯誤仍然存​​在。

代碼如我想：

/* 
angular.module('app').controller('verifyAccountController',['$scope',function($scope) { 
     $scope.message = "TEST!!"; 
    }]); 

*/ 
/* 
angular.module('app',['ngRoute']) 
.controller('verifyAccountController',verifyAccountController); 

verifyAccountController.$inject = ['$scope']; 

function verifyAccountController($scope){ 
    $scope.message="Test!!!!"; 
} 
*/ 

/* 
var app = angular.module('app', []); 
app.controller('verifyAccountController', function($scope) { 
    $scope.message="Test!!!!"; 
}); 

angular.module('app', []).controller('verifyAccountController', function($scope) { 
    $scope.message="Test!!!!"; 
}); 
*/

我怎樣才能解決這個問題呢？謝謝。

UPDATE

調試與未壓縮angularjs：

Error: [ng:areq] Argument 'verifyAccountController' is not a function, got undefined 
http://errors.angularjs.org/1.4.9/ng/areq?p0=verifyAccountController&p1=not%20a%20function%2C%20got%20undefined 
minErr/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:68:12 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:1816:1 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:1826:1 
$ControllerProvider/this.$get</<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:9356:9 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:8426:36 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:8468:32 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:7929:13 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:7932:13 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:7932:13 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:7809:30 
ngViewFillContentFactory/<[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.8-route.min.js:985:7 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:9039:9 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:8533:1 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:7929:13 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:7809:30 
createBoundTranscludeFn/[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:7947:1 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:8560:18 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.8-route.min.js:935:25 
$RootScopeProvider/this.$get</[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:16573:15 
commitRoute/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8-route.min.js:619:15 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:14991:28 
scheduleProcessQueue/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:15007:27 
$RootScopeProvider/this.$get</[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:16251:16 
$RootScopeProvider/this.$get</[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:16069:15 
$RootScopeProvider/this.$get</[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:16359:13 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:10791:36 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:10989:7 
[email protected]://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:10930:1 

<div class="content-wrapper ng-scope" ng-controller="mainController" ng-view="">

來源

2016-01-25 Kheshav Sewnundun

+0

故障排除將其添加到app.js是一場噩夢。除非我準備好部署代碼，否則我不使用angular.min.js。 – cst1992

+0

順便說一句，你得到的錯誤是「不是一個函數;得到了undefined」 – cst1992

+0

我沒有看到你已經包含文件「/ admin/pages/verifyAccount」在你的index.html或default.html頁面。將此文件插入index.html或default.html頁面。它會工作！ –

回答

1

  1. ，以便將其用於控制​​器登記檢索角模塊，應使用用於檢索先前註冊的模塊angular.module('app')語法，這是用來不angular.module('app', [...])創建的模塊。

  2. 您所做的控制器關聯不太清楚。您必須選擇在主HTML文件中使用ng-controller="..."語法的全局控制器，或者通過在$routeProvider配置中關聯控制器和視圖來選擇全局控制器。

  3. 避免在單個文件上混合顯示描述（HTML）和控制器定義（JS）。創建控制器分開的文件，或精縮角js文件使用app.controller('someController',[...])或angular.module('app').controller('someController', [...])

來源

2016-01-25 12:01:47

+0

分離模板和控制器解決問題，謝謝:) –

1

既然你原來app.js已經存在，它的工作原理。但是，當控制器在自己的文件中時不行。您還必須在<script></script>標籤中包含新文件。

此外，url /admin/pages/verifyAccount上的文件不應包含腳本;它是一個模板，只能包含HTML代碼。爲其他控制器使用* .js文件並將它們包含在主HTML文件中。

來源

2016-01-25 11:54:56 cst1992

+0

分離模板和控制器解決了這個問題，謝謝:) –

+0

很高興我可以提供幫助。 – cst1992

相關問題

 相關問題