简体   繁体   English

AngularJS:找不到注册的控制器

[英]AngularJS: can't find registered controller

I am new to angular but have created a fairly simple app.我是 angular 的新手,但已经创建了一个相当简单的应用程序。 I have looked through other, similar questions but I don't see any obvious spelling mistakes.我已经浏览了其他类似的问题,但我没有看到任何明显的拼写错误。

in my html file在我的 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>

In my outcomes.js file在我的 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);

NONE of the console.logs are getting hit, and the error I get is that OutcomeController is not registered.没有一个 console.logs 被击中,我得到的错误是OutcomeController未注册。 But I do so on the bottom line correct?但我这样做的底线正确吗? Is there anything obvious I am missing?有什么明显的我遗漏了吗?

Because you did not add ng-app and CDN for the angular router.因为你没有为angular router添加ng-app和CDN。 We can use CDN or we can install an angular route using npm install.我们可以使用 CDN,也可以使用 npm install 安装角度路由。 the console is printed properly you need to add $scope.showDefaultCprRequest() because there is no function related to that.控制台打印正确,您需要添加 $scope.showDefaultCprRequest() 因为没有与此相关的功能。 You can find angular all the CDN from here:您可以从这里找到 angular 的所有 CDN:

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

HTML: 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: 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;
                })
            };
    };
}]);

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM