AngularJS:找不到注册的控制器

时间:2019-12-05 03:12:45

标签: javascript html angularjs

我对angular并不陌生,但是创建了一个相当简单的应用程序。我已经浏览了其他类似的问题,但是看不到任何明显的拼写错误。

在我的html文件中

<div ng-controller="OutcomeController" data-ng-init= "init()">

    <div class="title">
      <h1>Runs</h1>
                  <br/>
    </div>

    <table width="98%">
      <tr>
        <td>
          <div class="searchPlace">
            <form ng-submit="showCprRequest()" class= "search-form">
                <input type="text" class="search-input" ng-model="idText" 
                       placeholder="Search Id" autofocus>
                <button type="submit" class="search-submit" >Search</button>
            </form>
          </div>
        </td>
      </tr>
    </table>

在我的results.js文件中

function OutcomeController ($scope, $rootScope, $location ,$http, $log, $routeParams, diceService) {

    $scope.init = function () {
        // get id from url parameter (html head part)
        $scope.id=$routeParams.id;
        console.log('here');
        // if id already entered on the page, get it from there
        if ($scope.iIdText != null && $scope.idText != undefined && $scope.idText != "") {
            $scope.showCprRequest();
        }
        else if ($scope.id == null || $scope.id == undefined) {
            $scope.showDefaultCprRequest();
        }
        else {
            $scope.iIdText = $scope.id;
            $scope.showCprRequest();
        }


    $scope.showCprRequest = function () {
        if ($scope.IdText.length == 0) {
            console.log('or there');
            return;
        }

        console.log('here');
        var requestUrl = baseUrl+ "/cpr/" + $scope.id;
        $http({method: "GET", url: requestUrl}).
            success(function (data, status) {
                    $scope.diceRequestDisplays = data;
                    $scope.itemsPerPage = $scope.totalItems;
                }
            });

    };

angular.module('outcome', []).controller('OutcomeController', OutcomeController);

没有console.logs被击中,我得到的错误是OutcomeController未注册。但是我这样做对底线正确吗?有什么明显的我想念的吗?

1 个答案:

答案 0 :(得分:0)

因为您没有为角度路由器添加ng-app和CDN。 我们可以使用CDN,也可以使用npm install安装角度路由。 控制台已正确打印,您需要添加$ scope.showDefaultCprRequest(),因为没有与此相关的功能。 您可以从这里找到所有CDN的角度:

https://cdnjs.com/libraries/angular.js/1.4.0

HTML:

    <!doctype html>
    <html ng-app="App">
    <head>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
        <script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>


      <div ng-controller="OutcomeController" ng-init= "init()">

        <div class="title">
              <h1>Runs</h1>
                          <br/>
             </div>

            <table width="98%"><tr>
                <td>
                <div class="searchPlace">
                                <form ng-submit="showCprRequest()" class= "search-form">
                                    <input type="text" class="search-input" ng-model="idText" placeholder="Search Id" autofocus>
                                    <button type="submit" class="search-submit" >Search</button>
                                </form>
                </div>
                </td>
            </tr></table>
    </div>

    </body>
    </html>

js:

var app = angular.module('App',['ngRoute']);
app.controller('OutcomeController', ['$scope', '$rootScope', '$location' ,'$http', '$log', '$routeParams', function ($scope, $rootScope, $location ,$http, $log, $routeParams)
{
  $scope.init = function () {
        // get id from url parameter (html head part)
        console.log('here');
        $scope.id=$routeParams.id;
        // if id already entered on the page, get it from there
        if ($scope.iIdText != null && $scope.idText != undefined && $scope.idText != "") {
            $scope.showCprRequest();
        }
        else if ($scope.id == null || $scope.id == undefined) {
            $scope.showDefaultCprRequest();
        }
        else {
            $scope.iIdText = $scope.id;
            $scope.showCprRequest();
        }


    $scope.showCprRequest = function () {
        if ($scope.IdText.length == 0) {
            console.log('or there');
            return;
        }

        console.log('here');
        var requestUrl = baseUrl+ "/cpr/" + $scope.id;
        $http({method: "GET", url: requestUrl}).
            success(function (data, status) {
                    $scope.diceRequestDisplays = data;
                    $scope.itemsPerPage = $scope.totalItems;
                })
            };
    };
}]);