angularjs在按钮点击时给出错误

时间:2014-09-18 08:59:59

标签: angularjs

我创建了一个表单,当我尝试点击按钮时,它会出现错误:

Error: [$injector:unpr] http://errors.angularjs.org/1.2.12/$injector/unpr?p0=%24routeParamsProvider%20%3C-%20%24routeParams
    at Error (native)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:6:450
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:32:125
    at Object.c [as get] (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:30:200)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:32:193
    at c (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:30:200)
    at d (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:30:417)
    at Object.instantiate (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:31:80)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:62:33
    at http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js:2797:28 <div ui-view="" class="ng-scope">
  (anonymous function)  angular.min.js:85
  (anonymous function)  angular.min.js:62
  H angular.min.js:49
  f angular.min.js:42
  (anonymous function)  angular.min.js:42
  updateView    angular-ui-router.js:2733
  (anonymous function)  angular-ui-router.js:2697
  h.$broadcast  angular.min.js:105
  $state.transition.resolved.then.$state.transition angular-ui-router.js:2114
  A angular.min.js:93
  (anonymous function)  angular.min.js:94
  h.$eval   angular.min.js:102
  h.$digest angular.min.js:100
  h.$apply  angular.min.js:103
  f angular.min.js:67
  H angular.min.js:71
  C.onreadystatechange  angular.min.js:72

我已经在.html文件中编写了代码 我有register.html页面:

<form name="myForm"  ng-controller="registerNew()" novalidate>

    <p>Preferred UserName:<br>
        <input type="text" name="NewUname" ng-model="NewUname" required>
  <span style="color:red" ng-show="myForm.NewUname.$dirty && myForm.NewUname.$invalid">
  <span ng-show="myForm.NewUname.$error.required">User Name is required.</span>
  </span>
    </p>

    <p>FirstName:<br>
        <input type="text" name="fName" ng-model="fName" required>
  <span style="color:red" ng-show="myForm.fName.$dirty && myForm.fName.$invalid">
  <span ng-show="myForm.fName.$error.required">First Name is required.</span>
  </span>
    </p>

    <p>LastName:<br>
        <input type="text" name="lName" ng-model="lName" required>
  <span style="color:red" ng-show="myForm.lName.$dirty && myForm.lName.$invalid">
  <span ng-show="myForm.lName.$error.required">Last Name is required.</span>
  </span>
    </p>

    <p>Email:<br>
        <input type="email" name="mail" ng-model="mail" required>
  <span style="color:red" ng-show="myForm.mail.$dirty && myForm.mail.$invalid">
  <span ng-show="myForm.mail.$error.required">Email is required.</span>
  <span ng-show="myForm.mail.$error.email">Invalid email address.</span>
  </span>
    </p>

    <p>Password:<br>
        <input type="password" name="newpwd" ng-model="newpwd" required>
  <span style="color:red" ng-show="myForm.newpwd.$dirty && myForm.newpwd.$invalid">
  <span ng-show="myForm.newpwd.$error.required">Password is required.</span>
  </span>
    </p>

    <p>Confirm Password:<br>
        <input type="password" name="newcPWD" ng-model="newcPWD" required >
  <span style="color:red" ng-show="myForm.newcPWD.$dirty && myForm.newcPWD.$invalid">
  <span ng-show="myForm.newcPWD.$error.required">Password is required.</span>
  </span>
    </p>

    <p>
        <input type="submit" ng-click="addNew()"
               ng-disabled="myForm.lname.$dirty && myForm.lname.$invalid ||
               myForm.fname.$dirty && myForm.fname.$invalid ||
  myForm.mail.$dirty && myForm.mail.$invalid ||
  myForm.pwd.$dirty && myForm.pwd.$invalid ||
  myForm.cpwd.$dirty && myForm.cpwd.$invalid">
    </p>


</form>

在Public / javascript / controller.js中,我的代码为:

function registration($scope, $routeParams, test)
{
    console.log('inside db function');
    $scope.registerNew = function()
    {
        console.log('inside db function');
    }
}

和app.js喜欢:

angular.module('test', [])
        .config(function($routeProvider) {

            $routeProvider
                .when('register', {
                    url: '/register',
                    templateUrl: '../partials/register.html',
                    controller: 'registration'
                });
            $routeProvider.when('login', {
                url: '/login',
                templateUrl: '../partials/login.html',
                controller: 'login'
            });


        });

我已将主html文件中的ng-app定义到主div上:

4 个答案:

答案 0 :(得分:0)

<form name="myForm"  ng-controller="registerNew()" novalidate>

应该是

<form name="myForm"  ng-controller="registration" novalidate>

function registration($scope) {..

答案 1 :(得分:0)

确保注入到控制器的所有依赖项都是正确的,并且没有拼写错误或未定义。

click here to get error description from AngularJS Docs

答案 2 :(得分:0)

在app.js,尝试更改此

angular.module('test', [])

到这个

angular.module('test', ['ngRoute'])

您需要注入ngRoute服务才能使用$ routeProvider。

有关详情,请参阅此处: AngularJs Docs

我希望这会有所帮助。

答案 3 :(得分:0)

你的代码不清楚但是你应该试试这个,你可以在重定向到像

这样的URL时使用哈希符号
 href='#/login '   

希望这有帮助。