ข้อผิดพลาด: อาร์กิวเมนต์ไม่ใช่ฟังก์ชันไม่ได้กำหนด

120

ใช้ AngularJS กับ Scala Play ฉันได้รับข้อผิดพลาดนี้

ข้อผิดพลาด: Argument 'MainCtrl' ไม่ใช่ฟังก์ชันไม่ได้กำหนด

ฉันกำลังพยายามสร้างตารางที่ประกอบด้วยวันในสัปดาห์

โปรดดูรหัสของฉัน ฉันได้ตรวจสอบชื่อของคอนโทรลเลอร์แล้ว แต่ดูเหมือนว่าถูกต้อง หมายเหตุ: รหัสที่ใช้จากคำตอบ SO นี้

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"]
        }
    });
}());

angularjs playframework

— เควินเมเรดิ ธ
แหล่งที่มา

15

ใน html ที่คุณใช้ng-appคุณสามารถเปลี่ยนเป็นng-app=myApp

— Chandermani

มีข้อผิดพลาดเดียวกัน @Chandermani

— Kevin Meredith

คุณได้ลองลบการปิด (IIFE) ออกจากโค้ดแล้วหรือยัง? เมื่อฉันมีปัญหานี้เป็นเพราะฉันมีข้อผิดพลาด PHP ในจาวาสคริปต์ของฉัน

— Kevin Beal

1

คุณสามารถค้นหาปัญหาของคุณได้ตามรายการตรวจสอบนี้: stackoverflow.com/a/26797874/930170

— Sergei Panfilov

ยืนยันว่าคุณได้เพิ่ม MainCtrl.controller.js ในไฟล์ BundleConfig.cs หรือไม่

— Syed Mohamed

107

ลบออก[]จากชื่อ ([myApp]) ของโมดูล

angular.module('myApp', [])

และเพิ่มลงng-app="myApp"ใน html และควรใช้งานได้

— Chandermani
แหล่งที่มา

1

สิ่งที่ฉันต้องทำเพื่อให้มันใช้งานได้คือคำแนะนำที่สอง (เช่น set ng-app = "myApp") ถ้าฉันลบ [] ออกฉันพบข้อผิดพลาดอื่น

— Jason

15

การมีพารามิเตอร์ที่สอง[]บ่งชี้ว่าคุณกำลังสร้างโมดูลใหม่ การลบพารามิเตอร์ที่สองบ่งชี้ว่าคุณกำลังดึงโมดูลที่มีอยู่ ดังนั้นความเป็นไปได้อย่างหนึ่งในการตรวจสอบคือหากคุณโทรangular.moduleสองครั้งทั้งสองครั้งรวมถึงพารามิเตอร์ที่สองด้วย หากเป็นเช่นนั้นเหตุการณ์ที่เกิดขึ้นในภายหลังจะเขียนทับเหตุการณ์ที่สองโดยซ่อนคำจำกัดความของคอนโทรลเลอร์ไว้จนถึงจุดนั้น

— Carl G

26

เมื่อเขาบอกว่าจะเอา[]เขาหมายถึงพารามิเตอร์แรกที่ OP มีแทน[myApp] myAppเขาไม่ได้พูดถึงพารามิเตอร์ที่สอง

— Kevin Beal

1

ตรวจสอบชื่อตัวควบคุมของคุณหากคุณกำลังใช้เส้นทาง ชื่อตัวควบคุมในนิยามเส้นทางนั้นคำนึงถึงขนาดตัวพิมพ์

— Latin Warrior

78

FIRST ตรวจสอบว่า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';
    }]);

ชื่อคอนโทรลเลอร์ที่แตกต่างกันในตัวอย่างนี้จะทำให้เกิดข้อผิดพลาด แต่ตัวอย่างนี้ถูกต้อง

ตรวจสอบครั้งที่สองว่าคุณได้นำเข้าไฟล์จาวาสคริปต์ของคุณหรือไม่:

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

— pleerock
แหล่งที่มา

30

จากประสบการณ์ของฉัน "ที่สอง" ของคุณเป็นปัญหาเสมอ ฉันมักลืมนำเข้าคอนโทรลเลอร์ของฉันindex.html

— msanford

มันเป็นอันที่สองในกรณีของฉันเช่นกันลืมนำเข้าไฟล์ JS ...

— Saurabh Misra

26

ฉันมีข้อความแสดงข้อผิดพลาดเดียวกัน (ในกรณีของฉัน: "Argument 'languageSelectorCtrl' ไม่ใช่ฟังก์ชันไม่ได้กำหนด")

หลังจากการเปรียบเทียบที่น่าเบื่อกับโค้ดของ Angular seed ฉันพบว่าก่อนหน้านี้ฉันได้ลบการอ้างอิงโมดูลคอนโทรลเลอร์ใน app.js (ดูได้ที่https://github.com/angular/angular-seed/blob/master/app/js/app.js )

ดังนั้นฉันจึงมีสิ่งนี้:

angular.module('MyApp', ['MyApp.filters', 'MyApp.services', 'MyApp.directives'])

สิ่งนี้ล้มเหลว

และเมื่อฉันเพิ่มข้อมูลอ้างอิงที่ขาดหายไป:

angular.module('MyApp', ['MyApp.filters', 'MyApp.services', 'MyApp.controllers', 'MyApp.directives'])

ข้อความแสดงข้อผิดพลาดหายไปและ Angular สามารถติดตั้งคอนโทรลเลอร์ได้อีกครั้ง

— เบอร์ทรานด์
แหล่งที่มา

มีปัญหาเดียวกันปัญหาของฉันคือฉันลืมเพิ่มคอนโทรลเลอร์ไปยังโมดูลแอพ ... ทำไมสิ่งนี้ไม่เกิดขึ้นโดยอัตโนมัติ ??? ขอบคุณอย่างไรก็ตาม!

— TheZuck

16

บางครั้งข้อผิดพลาดนี้เป็นผลมาจากคำสั่งสอง ng-appคำที่ระบุไว้ใน html ในกรณีของฉันโดยไม่ได้ตั้งใจฉันได้ระบุไว้ng-appในhtmlแท็กของฉันและng-app="myApp"ในbodyแท็กดังนี้:

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

— Gaurav
แหล่งที่มา

1

มันเกิดขึ้นกับฉันเมื่อฉันไม่ได้เพิ่มการฉีดเข้าไปในโมดูล myApp

— Ghandhikus

ขอบคุณ! สิ่งนี้ช่วยแก้ปัญหาของฉันได้

— bradden_gross

6

สิ่งนี้ทำให้ฉันใช้เวลา 4 ชั่วโมงอย่างจริงจัง (รวมถึงการค้นหาที่ไม่สิ้นสุดใน SO) แต่ในที่สุดฉันก็พบมัน: โดยไม่ได้ตั้งใจ (โดยไม่ได้ตั้งใจ) ฉันเพิ่มช่องว่างไว้ที่ใดที่หนึ่ง

คุณสามารถมองเห็นได้หรือไม่?

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

4 ชั่วโมงต่อมาฉันเห็นว่าควรจะเป็น:

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

แทบจะมองไม่เห็นด้วยตาเปล่าเลย

สิ่งนี้เน้นความสำคัญอย่างยิ่งของการควบคุมการแก้ไข (git หรืออะไรก็ตาม) และการทดสอบหน่วย / การถดถอย

— สิงห์
แหล่งที่มา

1

คำตอบของฉันไม่ใช่ช่องว่างเพิ่มเติม แต่นำไปสู่การแก้ไข ฉันมีControllerแทนcontrollerและนั่นคือทั้งหมดที่ต้องใช้

— Grandizer

และฉันตั้งชื่อไฟล์ของฉัน options-moda.controller.js แต่กำลังมองหา options-modal.controller.js DOH!

— theFish

ของฉันเป็นเพราะฉันลืมเพิ่ม. js ใน BundleConfig เรียบง่าย แต่น่าหงุดหงิด

— Ege Bayrak

4

ฉันพบปัญหาเดียวกันและในกรณีของฉันมันเกิดขึ้นจากปัญหานี้:

ฉันกำหนดคอนโทรลเลอร์ไว้ในโมดูลแยกต่างหาก (เรียกว่า 'myApp.controllers') และฉีดเข้าไปในโมดูลแอปหลัก (เรียกว่า 'myApp') ดังนี้:

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

เพื่อนร่วมงานผลักโมดูลคอนโทรลเลอร์อื่นในไฟล์แยกต่างหาก แต่มีชื่อเดียวกันกับของฉัน (เช่น 'myApp.controllers') ซึ่งทำให้เกิดข้อผิดพลาดนี้ ฉันคิดว่าเพราะ Angular สับสนระหว่างโมดูลคอนโทรลเลอร์เหล่านั้น อย่างไรก็ตามข้อความแสดงข้อผิดพลาดไม่เป็นประโยชน์ในการค้นหาสิ่งที่เกิดขึ้น

— Lilla Eli
แหล่งที่มา

1

สิ่งนี้ควรได้รับการแก้ไขโดยการลบพารามิเตอร์ที่สองในโมดูล ... เพื่อรับโมดูลที่มีอยู่โดยใช้ angular.module ('myApp') โดยไม่มีพารามิเตอร์ที่สอง เช่น angular.module ('myApp'). contoller (... )

— Santhosh

3

ในกรณีของฉัน (มีหน้าภาพรวมและหน้า "เพิ่ม") ฉันได้รับสิ่งนี้ด้วยการตั้งค่าเส้นทางของฉันดังด้านล่าง มันให้ข้อความสำหรับ 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 แต่ไม่พบตัวควบคุมของมัน

การลบเส้นทาง '/' - เมื่อเคสแก้ไขปัญหานี้ให้ฉัน

— EeKay
แหล่งที่มา

ฉันได้รับข้อผิดพลาดนี้เช่นกันและฉีกผมออกเพราะมันทำให้การสร้าง TFS ของฉันล้มเหลว การแสดงความคิดเห็นเกี่ยวกับเส้นทาง '/' ได้รับการแก้ไขสำหรับฉันเช่นกัน ตอนนี้เพื่อหาสาเหตุ!

— Phillip Copley

3

หากคุณอยู่ในโมดูลย่อยอย่าลืมประกาศโมดูลในแอปหลัก กล่าวคือ:

<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>

หากคุณไม่ประกาศ subModule1 ใน mainApp คุณจะได้รับอาร์กิวเมนต์ "[ng: areq]" MyController "ไม่ใช่ฟังก์ชันซึ่งไม่ได้กำหนดไว้

— syjust
แหล่งที่มา

2

จุดที่สองของУmedคือข้อผิดพลาดของฉัน แต่สำหรับบันทึกอาจจะช่วยใครสักคน:

ฉันมีปัญหาเดียวกันและก่อนที่ฉันจะบ้าฉันพบว่าฉันลืมใส่สคริปต์คอนโทรลเลอร์ของฉัน

เนื่องจากแอปของฉันใช้ ASP.Net MVC ฉันจึงตัดสินใจที่จะรักษาตัวเองให้มีสติด้วยการใส่ข้อมูลโค้ดต่อไปนี้ในApp_Start / BundleConfig.csของฉัน

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

และในLayout.cshtml

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

ตอนนี้ฉันไม่ต้องคิดเกี่ยวกับการรวมไฟล์ด้วยตนเองอีกแล้ว ในการมองย้อนกลับไปฉันควรทำสิ่งนี้จริงๆเมื่อตั้งค่าโครงการ ...

— Xceno
แหล่งที่มา

1

ฉันพบข้อผิดพลาดที่ดีกับ LoginController ซึ่งฉันใช้ใน index.html หลัก ฉันพบสองวิธีในการแก้ไข:

การตั้งค่า $ controllerProvider.allowGlobals () ฉันพบว่าความคิดเห็นใน Angular change-list "ตัวเลือกนี้อาจมีประโยชน์สำหรับการย้ายแอปเก่า แต่โปรดอย่าใช้ในแอปใหม่!" ความคิดเห็นเดิมเกี่ยวกับ Angular

app.config (['$ controllerProvider', ฟังก์ชัน ($ controllerProvider) {$ controllerProvider.allowGlobals ();}]);
ตัวควบคุมการลงทะเบียนผิด

ก่อน

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']);

— Dmitri Algazin
แหล่งที่มา

1

ฉันมีข้อผิดพลาดเดียวกันกับข้อผิดพลาดใหญ่:

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

}]);

เห็นมั้ย? ฉันลืม '' รอบ ๆ $ ขอบเขตแรกแน่นอนว่าไวยากรณ์ที่ถูกต้องคือ:

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

}]);

ข้อผิดพลาดแรกที่ฉันไม่เห็นทันทีคือ: " ไม่ได้กำหนดขอบเขต $ " ตามด้วย " ข้อผิดพลาด: [ng: areq] อาร์กิวเมนต์ 'TreeEditStepControlsCtrl' ไม่ใช่ฟังก์ชันไม่ได้กำหนด "

— อีโล
แหล่งที่มา

0

สามารถทำได้ง่ายเพียงแค่ใส่เนื้อหาของคุณใน "" และอะไรก็ตามที่ต้องการคำพูดที่อยู่ด้านในด้วย ""

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

กลายเป็น

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

นั่นอาจทำให้เกิดปัญหาในการแยกวิเคราะห์

— เจ๊ทอม
แหล่งที่มา

0

ในการแก้ไขปัญหานี้ฉันต้องค้นพบว่าฉันสะกดชื่อคอนโทรลเลอร์ผิดในการประกาศเส้นทางเชิงมุม:

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

— MadPhysicist
แหล่งที่มา

0

ในกรณีของฉันมันเป็นการพิมพ์ผิดง่ายๆในindex.html:

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

ที่ควรจะเป็น

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

โดยไม่ต้องเพิ่มsชื่อคอนโทรลเลอร์

— ไหลวน
แหล่งที่มา

0

ปรากฎว่าเป็นแคชของเบราว์เซอร์โดยใช้ Chrome ที่นี่ เพียงตรวจสอบ "ปิดการใช้งานแคช" ภายใต้การตรวจสอบ (องค์ประกอบ) เพื่อแก้ปัญหาของฉัน

— Weihui Guo
แหล่งที่มา

0

เนื่องจากสิ่งนี้ปรากฏขึ้นใน Google เมื่อพยายามค้นหาคำตอบสำหรับ: "ข้อผิดพลาด: อาร์กิวเมนต์ '' ไม่ใช่ฟังก์ชันจึงไม่ได้กำหนด"

เป็นไปได้ว่าคุณกำลังพยายามสร้างโมดูลเดียวกันสองครั้ง

angular.module เป็นพื้นที่ส่วนกลางสำหรับการสร้างการลงทะเบียนและการเรียกใช้โมดูล AngularJS

การส่งอาร์กิวเมนต์หนึ่งรายการจะดึงข้อมูลเชิงมุมที่มีอยู่โมดูลในขณะที่การ ส่งผ่านมากกว่าหนึ่งอาร์กิวเมนต์จะสร้างเชิงมุมใหม่

ที่มา: https://docs.angularjs.org/api/ng/function/angular.module#overview

ตัวอย่าง:

angular.module('myApp', []) ถูกใช้เพื่อสร้างโมดูลโดยไม่ต้องฉีดการอ้างอิงใด ๆ

angular.module('myApp') (ไม่มีอาร์กิวเมนต์) ใช้เพื่อรับโมดูลที่มีอยู่

— MCollard
แหล่งที่มา

0

ดูเหมือนจะมีการแก้ปัญหาการทำงานจำนวนมากชี้ให้เห็นข้อผิดพลาดที่มีสาเหตุที่เกิดขึ้นจริงจำนวนมาก

ในกรณีของฉันฉันไม่ได้ประกาศตัวควบคุมในapp/index.html:

<scipt src="src/controllers/controller-name.controller.js"></script>

เกิดข้อผิดพลาด

— Ty Conway
แหล่งที่มา