angularjs 앵귤러 - 오류:인수가 함수가 아니며 정의되지 않았습니다.




$scope $watch (13)

필자의 경우 index.html 의 간단한 오타였습니다.

<script src="assets/javascript/controllers/questionssIndexController.js"></script>

그랬어야 했어.

<script src="assets/javascript/controllers/questionsIndexController.js"></script>

컨트롤러의 이름에 여분 s 문자를 넣지 않아도됩니다.

Scala Play에서 AngularJS를 사용하면이 오류가 발생합니다.

오류 : 인수 'MainCtrl'이 (가) 정의되지 않은 함수가 아닙니다.

저는 요일로 구성된 테이블을 만들려고합니다.

내 코드를 한번보세요. 컨트롤러의 이름을 확인했지만 올바른 것 같습니다. 참고 :이 SO answer 에서 사용 된 코드

index.scala.html

@(message: String)

@main("inTime") {

<!doctype html>
<html lang="en" ng-app>
    <head>
        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
    </head>
<div ng-controller="MainCtrl">
    <table border="1">
    <tbody ng-repeat='(what,items) in data'>
      <tr ng-repeat='item in items'>
        <td ngm-if="$first" rowspan="{{items.length}}">{{what}}</td>
        <td>{{item}}</td>
      </tr>
    </tbody>
  </table>
</div>
</html> 
}

MainCtrl.js

(function() {
    angular.module('[myApp]', []).controller('MainCtrl', function($scope) {
        $scope.data = {
            Colors: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
        }
    });
}());

나는이 문제로 인해 동일한 문제를 겪었고 내 경우에는 그 일이 벌어졌다.

컨트롤러를 별도의 모듈 ( 'myApp.controllers')에 정의하고 다음과 같이 'myApp'라고하는 기본 앱 모듈에 주입했습니다.

angular.module('myApp', ['myApp.controllers'])

동료가 별도의 파일에 다른 컨트롤러 모듈을 밀어 넣었으나이 오류의 원인이 된 동일한 이름 (예 : 'myApp.controllers')을 사용했습니다. Angular가 컨트롤러 모듈들 사이에서 혼란스러워했기 때문에 나는 생각합니다. 그러나 오류 메시지는 무엇이 잘못되었는지 발견하는 데별로 도움이되지 못했습니다.


큰 실수로 같은 오류가 발생했습니다.

appFormid.controller('TreeEditStepControlsCtrl', [$scope, function($scope){

}]);

너 알지? 첫 번째 $ 범위 주변을 잊어 버렸습니다. 올바른 구문은 물론입니다.

appFormid.controller('TreeEditStepControlsCtrl', ['$scope', function($scope){

}]);

" 오류 : [ng : areq] 인수 'TreeEditStepControlsCtrl'이 (가) 정의되지 않은 함수가 아닙니다. "다음에 immediatly가 표시되지 않은 첫 번째 오류가 있습니다. " 범위가 정의 되지 않았습니다. "


Уmed의 두 번째 포인트는 내 함정 이었지만 기록만을 위해 어딘가에서 누군가를 돕는 것이었을 것입니다.

나는 똑같은 문제가 있었고, 내가 견과를 다 먹기 직전에 나는 나의 컨트롤러 스크립트를 포함하는 것을 잊었다는 것을 발견했다.

내 응용 프로그램이 ASP.Net MVC를 기반으로하기 때문에 Applet / BundleConfig.cs 파일에 다음 스 니펫을 삽입하여 정상적으로 유지하기로 결정했습니다.

bundles.Add(new ScriptBundle("~/app").Include(
                "~/app/app.js",
                "~/app/controllers/*.js",
                "~/app/services/*.js" ));

Layout.cshtml에서

<head>
...
   @Scripts.Render("~/app")
...
</head>

이제 수동으로 파일을 다시 포함하는 것에 대해 생각할 필요가 없습니다. 뒤늦은 견해로는 프로젝트를 시작할 때 정말로이 작업을 수행 했어야합니다 ...


이것은 심각하게 나를 4 시간 (그래서 끝없는 검색을 포함)했다지만 마침내 나는 그것을 발견 : 실수로 (어쩌면) 어딘가에 공간을 추가했습니다.

그것을 발견 할 수 있습니까?

angular.module('bwshopper.signup').controller('SignupCtrl ', SignupCtrl);

그래서 ... 4 시간 후에 나는 그것이 있어야한다는 것을 알았다.

angular.module('bwshopper.signup').controller('SignupCtrl', SignupCtrl);

육안으로는보기가 거의 불가능합니다.

이는 개정 관리 (git 또는 무엇이든) 및 단위 / 회귀 테스트의 중요성을 강조합니다.


주 index.html에서 사용한 LoginController에 오류가 있습니다. 해결할 수있는 두 가지 방법을 찾았습니다.

  1. $ controllerProvider.allowGlobals ()를 설정하면 Angular change-list 에있는 주석을 발견했습니다. "이 옵션은 이전 응용 프로그램을 마이그레이션 할 때 유용 할 수 있지만 새로운 응용 프로그램에서는 사용하지 마십시오!" Angular에 대한 원래 코멘트

    app.config ([ '$ controllerProvider', function ($ controllerProvider) {$ controllerProvider.allowGlobals ();}]);

  2. 컨트롤러 등록의 잘못된 생성자

전에

LoginController.$inject = ['$rootScope', '$scope', '$location'];

지금

app.controller('LoginController', ['$rootScope', '$scope', '$location', LoginController]);

'app'은 app.js에서 왔습니다.

var MyApp = {};
var app = angular.module('MyApp ', ['app.services']);
var services = angular.module('app.services', ['ngResource', 'ngCookies', 'ngAnimate', 'ngRoute']);

먼저. 정의중인 컨트롤러 이름과 동일한 경로 정의에 올바른 controller 가 있는지 확인하십시오

communityMod.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/members', {
        templateUrl: 'modules/community/views/members.html',
        controller: 'CommunityMembersCtrl'
      }).
      otherwise({
        redirectTo: '/members'
      });
  }]);

communityMod.controller('CommunityMembersCtrl', ['$scope',
    function ($scope) {
        $scope.name = 'Hello community';
    }]);

이 예의 서로 다른 컨트롤러 이름은 오류로 이어지지 만이 예제는 정확합니다

두 번째 는 javascript 파일을 가져 왔는지 확인합니다.

<script src="modules/community/controllers/CommunityMembersCtrl.js"></script>


그것은 자산을 ""둘러싸는 것만 큼 간단 할 수 있고, 내부에는 "?"으로 따옴표가 필요합니다.

<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">

된다

<link rel="stylesheet" media="screen" href="@routes.Assets.at('stylesheets/main.css')">

그 때문에 파싱에 몇 가지 문제가 발생할 수 있습니다.


내 경우에는 (개요 페이지와 "추가"페이지가 있음) 다음과 같은 라우팅 설정을 사용했습니다. 그것은 삽입 할 수없는 AddCtrl에 대한 메시지를 제공했습니다 ...

$routeProvider.
  when('/', {
    redirectTo: '/overview'
  }).      
  when('/overview', {
    templateUrl: 'partials/overview.html',
    controller: 'OverviewCtrl'
  }).
  when('/add', {
    templateUrl: 'partials/add.html',
    controller: 'AddCtrl'
  }).
  otherwise({
    redirectTo: '/overview'
  });

when('/' 경로로 인해 모든 경로가 개요로 이동했고 컨트롤러가 / 경로 추가 페이지 렌더링에서 일치 할 수 없었습니다. add.html 템플릿을 보았으므로 컨트롤러가 아무 곳에도 없었기 때문에 혼란 스러웠습니다. 녹이다.

이 문제가 해결되면 '/'경로 제거.


서브 모듈에 있다면, 메인 어플리케이션에 모듈을 선언하는 것을 잊지 마십시오. 즉 :

<scrip>
angular.module('mainApp', ['subModule1', 'subModule2']);

angular.module('subModule1')
   .controller('MyController', ['$scope', function($scope) {
      $scope.moduleName = 'subModule1';
   }]);
</script>
...
<div ng-app="mainApp">
   <div ng-controller="MyController">
   <span ng-bind="moduleName"></span>
</div>

mainApp에서 subModule1을 선언하지 않으면 "[ng : areq] 인수가 있습니다."MyController "는 정의되지 않은 함수가 아닙니다.


이 오류는 html에 지정된 두 개의 ng-app 지시문의 결과입니다. 제 경우에는 실수로 html 태그에서 ng-app 를 지정하고 body 태그에서 ng-app="myApp" 를 다음과 같이 지정했습니다.

<html ng-app>
  <body ng-app="myApp"></body>
</html>

이 문제를 해결하기 위해 앵귤러 경로 선언에서 컨트롤러 이름의 철자가 잘못되었음을 발견해야했습니다.

.when('/todo',{
            templateUrl: 'partials/todo.html',
            controller: 'TodoCtrl'
        })

나는이 방법을 사용하여 완벽하게 잘 작동하는 것 같다. 이것은 사이클이 끝나기를 기다렸다가 apply() 를 트리거 apply() . 원하는 곳 어디에서나 apply(<your scope>) 함수를 호출하면 apply(<your scope>) .

function apply(scope) {
  if (!scope.$$phase && !scope.$root.$$phase) {
    scope.$apply();
    console.log("Scope Apply Done !!");
  } 
  else {
    console.log("Scheduling Apply after 200ms digest cycle already in progress");
    setTimeout(function() {
        apply(scope)
    }, 200);
  }
}




angularjs playframework