TypeError:无法读取属性'forgotPassword‘的null
TypeError:无法读取属性'forgotPassword‘的null
提问于 2014-07-30 09:49:44
我是AngularJS的新手..。我已经构建了一个app..and，现在我想测试它。现在正在使用AngularJS为我的应用程序的登录页面编写一个非常基本的测试用例，但是在运行该测试用例时会遇到以下错误：
- Chrome35.0.1916(Windows7) mainCtrl动态消息应出现错误：$injector:modulerr$injector
- TypeError:无法读取null D:/iLab/app/test/test_login.js:25:9的属性“forgotPassword”)
全错误：
这是整个错误：
Chrome 35.0.1916 (Windows 7) mainCtrl dynamic message should appear FAILED Error: [$injector:modulerr] http://errors.angularjs.org/1.2.6/$injector/modulerrp0=ngMock&p1=Error: [$injector:unpr] http://errors.angularjs.org/1.2.6/$injector/unpr?p0=%24%24rAFProvider
at Error (native)
at http://localhost:9876/base/lib/angular/angular.min.js?501db67e5cad2ba0361f46f3b7aa2aff9eb40143:15:11
at http://localhost:9876/base/lib/angular/angular.min.js?501db67e5cad2ba0361f46f3b7aa2aff9eb40143:788:11
at Object.c [as get] (http://localhost:9876/base/lib/angular/angular.min.js?501db67e5cad2ba0361f46f3b7aa2aff9eb40143:712:13)
at Object.Yb.m.$provide.decorator (http://localhost:9876/base/lib/angular/angular.min.js?501db67e5cad2ba0361f46f3b7aa2aff9eb40143:775:16)
at http://localhost:9876/base/bower_components/angular-mocks/angular-mocks.js?c83494fe10820a7dd953866c4e1cd590b17a0b15:1746:12
at Object.d [as invoke] (http://localhost:9876/base/lib/angular/angular.min.js?501db67e5cad2ba0361f46f3b7aa2aff9eb40143:732:14)
at http://localhost:9876/base/lib/angular/angular.min.js?501db67e5cad2ba0361f46f3b7aa2aff9eb40143:688:17
at Array.forEach (native)
at q (http://localhost:9876/base/lib/angular/angular.min.js?501db67e5cad2ba0361f46f3b7aa2aff9eb40143:32:7)
at Error (native) at
D:/iLab/app/lib/angular/angular.min.js:15:11 at D:/iLab/app/lib/angular/angular.min.js:695:7 at Array.forEach (native) at q (D:/iLab/app/lib/angular/angular.min.js:32:7) at e (D:/iLab/app/lib/angular/angular.min.js:680:4) at Object.Yb [as injector] (D:/iLab/app/lib/angular/angular.min.js:7 95:5) at workFn (D:/iLab/app/bower_components/angular-mocks/angular-mocks.js:2150:52)TypeError: Cannot read property 'forgotPassword' of null at null.<anonymous> (D:/iLab/app/test/test_login.js:25:9) Chrome 35.0.1916 (Windows 7): Executed 1 of 1 (1 FAILED) ERROR(0.068 secs / 0.061 secs)这些是我的档案
index.html
<!doctype html>
<html lang="en" ng-app="angularProject">
<head>
<meta charset="utf-8">
<title>iLAB</title>
<link rel="stylesheet" href="css/app.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-responsive.min.css"/>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic' rel='stylesheet' type='text/css'>
<script src="lib/select2/jquery-1.10.1.min.js" type="text/javascript"></script>
<link href="lib/select2/select2.css" rel="stylesheet"/>
<script src="js/jquery-ui.js"></script>
<link href="css/jquery-ui.css" rel="stylesheet"/>
<script src="lib/angular/angular.min1_2_2.js"></script>
<script src="lib/angular/angular-ui.min.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="js/controllers/main.js"></script>
<script src="js/controllers/dashboard.js"></script>
<script src="lib/bootstrap/ui-bootstrap-tpls-0.3.0.js"></script>
</head>
<body ng-controller='mainCtrl' class="bodyColor" onload="myFunction()">
<script type="text/javascript">
function myFunction(){
document.getElementById("userName").focus();
}
function forgotPassword(){
console.log('test password!');
}
</script>
<div id="blanket"></div>
<div id="loginBox" >
<div id='loginFormContainer'>
<form class="form_style" >
<div class='loginFormLogo'><div class='logoText'>iLAB</div> </div>
<div class="login_dyanamic_msg_contaier"><div class="alertBox login_dyanamic_msg h5" ng-hide="loginAlertMessage" >{{dyanamicMessage}}</div></div>
<span class="float-left" >
<div class="text-left"><label class='lblUserName h4Bold' style="cursor: default;">Username</label></div>
<div style="padding-bottom:16px"><input id='userName'placeholder='john doe' type='text' ng-model='username'/></div>
</span>
<div class="float-left">
<div class="text-left"><label class='lblPassword h4Bold' style="cursor: default;">Password</label></div>
<div class="text-left">
<input type='password' placeholder='●●●●●●●' ng-model='password' id="ilabpassword" ng-trim='false'/></div>
<div class="text-right h7 undolink" ><a Onclick="forgotPassword()">Forgot Password?</a></div>
</div>
<div class='loginButton'>
<button id="loginId" class='PrimaryBtn h3Bold' style="margin-top:20px;padding:15px 60px 15px 60px!important;" ng-click="checkLogin()">Login</button>
</div>
</form>
</div>
</div>
</div>
<div ui-view="main" class="container " ></div>
<div class="container" ui-view="footer"></div>
</body>
</html>app.js
'use strict';
google.load('visualization', '1', {
packages : ['corechart', 'table']
});
var myapp = angular.module('angularProject', ['ngRoute', 'ui.bootstrap', 'ui', 'ui.router', 'ui.sortable', 'angularProject.filters', 'angularProject.services','angularProject.directives', 'angularProject.controllers']).config(['$stateProvider', '$routeProvider', '$urlRouterProvider', 'RestangularProvider', function ($stateProvider, $routeProvider, $urlRouterProvider, RestangularProvider)
{
$stateProvider.
state('home', {
url : '/home',
views : {
"main" : {
templateUrl : 'views/home.html',
controller : 'homeCtrl'
}
}
})
.state('home.dashboard', {
url : '/dashboard',
views : {
"content" : {
templateUrl : 'views/dashboard.html',
controller : 'dashboardCtrl'
}
}
})
}
]};main.js
'use strict';
angular.module('angularProject').controller('mainCtrl', function($scope, $state, $http, $rootScope, $timeout, keyboardManager, $location, Product, User, $stateParams, Restangular)
{
$rootScope.loginFirst = 1;
$scope.loginAlertMessage = true;
$location.path("/");
$scope.forgotPassword = function () {
$scope.loginAlertMessage = false;
$timeout(function () {
$scope.loginAlertMessage = true;
}, 3000);
$scope.dyanamicMessage = "Check your email inbox!!";
};
$scope.checkLogin = function () {
var user_data = {
"username" : $scope.username,
"password" : $scope.password
};
}
}test_login.js
describe('mainCtrl',function()
{
var $controller = null;
var $scope = null;
beforeEach(function()
{
module('angularProject');
});
beforeEach(inject(function($controller, $rootScope)
{
$scope = $rootScope.$new();
controller = $controller('mainCtrl',
{
$scope: $scope
});
}));
it('dynamic message should appear',function()
{
$scope.forgotPassword();
expect($scope.dyanamicMessage).toBe("Check your email inbox!!");
});
});karma.conf.js
// Karma配置//生成于2014年7月28日18:17:53 GMT+0530 (印度标准时间)
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'lib/angular/angular.min.js',
'bower_components/angular-mocks/angular-mocks.js',
'lib/bootstrap/*.js',
'lib/googleChart/*.js',
'lib/jquery/*.js',
'lib/select2/*.js',
'js/*.js',
'js/controllers/*.js',
'test/*.js'
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false
});
};有人能帮帮我吗？我无法追踪这个问题，所以我们一定会感谢你的帮助。:)
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-08-05 04:52:35
我发现了错误..。
角和角模拟应该是相同的版本.(在本例中是1.2.6)
而我面临的实际问题是由于复制了angular.min.js文件，我试图加载angular.min1_2_2.js和angular.min.js together..which，导致了错误的模块依赖。
谢谢你的帮助..。:)
Stack Overflow用户
发布于 2014-07-30 10:28:25
第一个错误(实际上还没有包括整个误差)，来自角度注入器。我认为其余的错误是它找不到模块angularProject。
您的app.js似乎正确地定义了模块，因此我认为您需要在运行测试之前检查是否正在将app.js加载到浏览器中。
这是在您的karma.conf文件中，在config.set.files数组中完成的。至少你会想要'/path/to/app.js'在里面。你能确认一下吗？
其次，您是否在main.js中使用angular.module('angularProject').controller()或类似的方式注册控制器？
编辑
确保您的项目安装了角模拟，并在业力conf中的files数组中引用了它。如果你认为你已经这样做了，请张贴你的因果报应。
编辑2
你能证实角度和角度的模拟是相同的版本吗？即两种1.2.6
最后也是最后一次编辑(希望)
似乎您正在使用来自两个不同版本的角度模块，您需要它们匹配(准确)，以确保不会出现可比较性问题。
Stack Overflow用户
发布于 2014-10-20 10:09:13
我认为这可能是由select2引起的错误。
我也使用那个select2，我注意到，当我删除它时，错误就消失了。还没有找到解决办法，但我会及时通知你的。
打招呼。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25033728
复制相关文章
相似问题
腾讯云开发者
