AngularJS त्रुटि: 'तर्क' FirstCtrl 'एक फ़ंक्शन नहीं है, अपरिभाषित हो गया'

93

मैंने देखा कि एक ही सवाल यहां कुछ बार पूछा गया था, मैंने इसे हल करने की कोशिश की लेकिन कुछ भी मदद नहीं करता है।

मैं इस ट्यूटोरियल को एगहेड वीडियो के साथ फॉलो कर रहा हूं।

लेकिन जब मुझे नियंत्रकों के बीच नियंत्रक और साझाकरण डेटा के अनुभाग में मिलता है, तो मुझे यह काम करने के लिए नहीं मिल सकता है।

जब मैं इसे क्रोम के साथ चलाता हूं, तो मुझे कंसोल में यह त्रुटि मिलती है:

'तर्क' FirstCtrl 'एक फ़ंक्शन नहीं है, अपरिभाषित हो गया'।

मैं वास्तव में नहीं जानता कि क्या गलत है। ट्यूटोरियल में कोड समान है।

एचटीएमएल

<!DOCTYPE html>
<html ng-app>
 <head>
    <title>AngularJS Tutorials: Controllers</title>
    <link rel="stylesheet" href="mystyle.css">
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
 </head>
 <body>
    <div ng-app="">
       <div ng-controller="FirstCtrl">   
           <h1> {{data.message + " world"}}</h1>

           <div class="{{data.message}}">
               Wrap me in a foundation component
           </div>
       </div>
    </div>
    <script type="text/javascript" src="main.js"></script>
 </body>
</html>

main.js

function FirstCtrl($scope){
   $scope.data = { message: "Hello" };
}

javascript angularjs

— Pumba
स्रोत

यहाँ दूसरी टिप्पणियों में समाधान है - stackoverflow.com/questions/24894870/…

— कंचन

108

ng-appआपके html में 2 अनाम निर्देश हैं।
अपनी डिव में एक को खो दो।

अद्यतन
एक अलग दृष्टिकोण की कोशिश करते हैं।
अपनी js फ़ाइल में एक मॉड्यूल को परिभाषित करें और ng-appइसे निर्देश निर्दिष्ट करें । उसके बाद, एनजी घटक की तरह नियंत्रक को परिभाषित करें, न कि एक साधारण कार्य के रूप में:

<div ng-app="myAppName">  
<!-- or what's the root node of your angular app -->

और जेएस हिस्सा:

angular.module('myAppName', [])
    .controller('FirstCtrl', function($scope) {
         $scope.data = {message: 'Hello'};
    });

यहाँ एक ऑनलाइन डेमो है जो बस कर रहा है: http://jsfiddle.net/FssbL/1/

— gion_13
स्रोत

उत्तर के लिए बहुत बहुत धन्यवाद, दुख की बात है कि मुझे अभी भी वही त्रुटि मिली है .. इसलिए मैंने div से ng-app = "" खो दिया है, लेकिन यह अभी भी काम नहीं करता है।

— पूंबा

1

आपकी मदद के लिए बहुत बहुत धन्यवाद! मुझे अब यह समझ में नहीं आ रहा है, मैंने ठीक वैसा ही काम किया जैसा आपने यहाँ और ऑनलाइन डेमो में दिखाया है लेकिन यह अभी भी कहता है कि 'फ़र्स्टट्रा' अपरिभाषित है। मैं इसे फिर से शुरू करने की कोशिश कर रहा हूं, उम्मीद है कि मुझे यह काम मिल जाएगा, क्योंकि अगले ट्यूटोरियल में मुझे यही समस्या मिलती है।

— पुम्बा

महान!! यह काम करता हैं। मैं js फ़ाइल के लिए स्क्रिप्ट टैग पर टाइप विशेषता को बंद करना भूल गया। और यह कि आपके दूसरे समाधान के संयोजन में यह काम कर गया! बहुत बहुत धन्यवाद :))

— Pumba

6

डेमो वीडियो मॉड्यूल के भीतर नियंत्रक को लपेटता नहीं है। तो यह उसके लिए काम क्यों करता है, लेकिन मैं नहीं? egghead.io/lessons/angularjs-controllers

— डिमोड्वेट करें

2

@Demodave, मेरा भी यही सवाल है। मुझे लगता है कि वीडियो AngularJS के पुराने संस्करण के दौरान रिकॉर्ड किए गए थे, और इसलिए नियंत्रकों को परिभाषित करना संभवतः कम सख्त था (लेकिन, यह सिर्फ मेरी धारणा है, मैं किसी को पुष्टि करने या इनकार करने के लिए खुश हूं)

— 20

93

मुझे बिल्कुल वही त्रुटि संदेश मिला और मेरे मामले में यह निकला कि मैंने नियंत्रक जेएस फ़ाइल (जैसे पहली- ctrl.js) को अपने index.html में सूचीबद्ध नहीं किया है

— मारिउज़
स्रोत

1

आपका क्या मतलब है कि आपने नियंत्रक js फ़ाइल को सूचीबद्ध नहीं किया है? क्या आप कह रहे हैं कि आपने इसे शामिल नहीं किया है?

— डिमोड्वे डिक्

@DavidStone हाँ - यह मेरा मामला था, तब वापस।

— मारिजस

एक और नोब त्रुटि: नियंत्रक में रूज कोष्ठक, आदि कंसोल में प्रदर्शित होने के लिए उसी प्रकार की त्रुटि का कारण बन सकता है।

— user2938649

9

मैंने अभी यह ट्यूटोरियल किया और @ gion_13 उत्तर का अनुसरण किया। फिर भी काम नहीं हुआ। इंडेक्स में मेरा एनजी-ऐप का नाम मेरी जेएस फ़ाइल में एक के समान बनाकर इसे हल किया । बिल्कुल समान, यहां तक कि उद्धरण भी। इसलिए:

<div ng-app="myapp">
    <div ng-controller="FirstCtrl">

और जेएस:

 angular.module("myapp", [])
.controller('FirstCtrl',function($scope) {
    $scope.data= {message:"hello"};
  });

अजीब है कि कैसे एनजी-ऐप समान होना चाहिए लेकिन एनजी-नियंत्रक नहीं है।

— an1waukoni
स्रोत

चार घंटे यह मुझे लागत; (, अंत में मुझे यह पता लगाने में मदद करने के लिए धन्यवाद।

— डॉवल्स

7

आपको अपना नाम देना होगाng-app , अपने ऐप को नाम स्थान देना होगा; बस का उपयोग ng-app करना पर्याप्त नहीं है ।

के बजाय:

<html ng-app>
...

आपको इसके बजाय कुछ इस तरह की आवश्यकता होगी:

<html ng-app="app">
...

फिर, जैसे:

var app = angular.module("app", []).controller("ActionsController", function($scope){});

— user1429980
स्रोत

5

एक और अच्छा: गलती से मॉड्यूल को फिर से परिभाषित करना। मैं आज से पहले बहुत उत्सुकता से सामान को कॉपी / पेस्ट करता हूं और कहीं न कहीं एक मॉड्यूल की परिभाषा को समाप्त करता हूं, कि मैं अपने नियंत्रक परिभाषाओं के साथ ओवररोड करता हूं:

// controllers.js - dependencies in one place, perfectly fine
angular.module('my.controllers', [/* dependencies */]);

तब मेरी परिभाषा में, मैं इसे इस तरह संदर्भित करना चाहिए था:

// SomeCtrl.js - grab the module, add the controller
angular.module('my.controllers')
 .controller('SomeCtrl', function() { /* ... */ });

इसके बजाय मैंने क्या किया :

// Do not try this at home!

// SomeCtrl.js
angular.module('my.controllers', []) // <-- redefined module, no harm done yet
  .controller('SomeCtrl', function() { /* ... */ });

// SomeOtherCtrl.js
angular.module('my.controllers', []) // <-- redefined module - SomeCtrl no longer accessible
  .controller('SomeOtherCtrl', function() { /* ... */ });

कॉल करने के लिए अतिरिक्त ब्रैकेट पर ध्यान दें angular.module।

— माइकल जेस
स्रोत

3

एनजी-एप = "" को हटा दें

<div ng-app="">

और बस इसे बनाते हैं

<div>

— जॉन स्मिथ
स्रोत

3

यदि आप अपने ऐप के कॉन्फ़िगरेशन में रूटिंग का उपयोग करते हैं, तो सुनिश्चित करें कि आप html में एनजी कंट्रोलर का उपयोग नहीं करते हैं। आपको इसके बजाय एनजी-व्यू होना चाहिए। नियंत्रक को आमतौर पर रूटिंग में विचारों के साथ परिभाषित किया जाएगा।

— मार्क

1

मुझे भी उसी मुद्दे का सामना करना पड़ा। लेकिन समस्या यह थी कि मैं मॉड्यूल की सूची में मॉड्यूल को सूचीबद्ध करना भूल गया था जो एनजी-ऐप पर निर्भर करता है।

3

यह एक टिप्पणी होनी चाहिए, एक जवाब नहीं।

— एन्थोनी पेरोट

1

मैंने इस मुद्दे का सामना किया है और यह निम्नलिखित तरीके से तय किया गया है:

पहले ng-app को यहां से हटाएं:
```
<html ng-app>
```
myApp में ng-app का नाम जोड़ें:
```
<div ng-app="myApp">
```
फ़ंक्शन से पहले कोड की इस पंक्ति को जोड़ें:
```
angular.module('myApp', []).controller('FirstCtrl',FirstCtrl);
```

स्क्रिप्ट का अंतिम रूप:

angular.module('myApp', []).controller('FirstCtrl',FirstCtrl);

function FirstCtrl($scope){
    $scope.data = {message: "Hello"};
}

— अजहर
स्रोत

1

मेरे मामले में, यह संदेश मुख्य मॉड्यूल में भूल निर्भरता इंजेक्शन से आता है

— थॉमस गोबर्ट
स्रोत

1

ऐसा तब हो सकता है जब आपने अपने एंगुलर ऐप कोड को एक से अधिक बार जोड़ने के लिए गलत तरीके से गलत अनुमान लगाया हो। मेरे मामले में, यह index.js में था, और यह मेरे नियंत्रक घोषणाओं से पहले और बाद में js फ़ाइलों की निर्देशिका के रूप में जोड़ रहा था (gulp में गोलाकार)। एक बार जब मैंने index.js को छोटा नहीं किया और दूसरी बार इंजेक्ट किया, तो मेरे ऐप ने काम करना शुरू कर दिया। एक और टिप अगर उपरोक्त समाधानों में से कोई भी आपकी समस्या का समाधान नहीं करता है।

— rncrtr
स्रोत

1

सबसे पहले - यदि मॉड्यूल नाम को परिभाषित नहीं किया गया है, तो जेएस में आप मॉड्यूल तक नहीं पहुंच पाएंगे और नियंत्रक को इससे लिंक कर पाएंगे।

आपको कोणीय मॉड्यूल को मॉड्यूल नाम प्रदान करने की आवश्यकता है। परिभाषित मॉड्यूल का उपयोग करने में अंतर होता है।

1 - एक को दूसरे तर्कों में जोड़ा गया कोई निर्भरता के साथ नए मॉड्यूल "फर्स्टमॉडल" घोषित करना है। 2 - यह "FirstModule" का उपयोग करना है जो कि कहीं और इनिशियलाइज़ किया गया है और आप इनिशियलाइज़ किए गए मॉड्यूल को प्राप्त करने और उसमें संशोधन करने की कोशिश कर रहे हैं।

— ईशान कुमार
स्रोत

0

मुझे इस समस्या का सामना करना पड़ा लेकिन मैं नियंत्रक का नाम बदलकर इस मुद्दे को ठीक करने में सक्षम था, कृपया इस पर एक प्रयास करें।

ctrlSub.execSummaryDocuments = function(){};

— अमय कुलकर्णी
स्रोत

0

फ़ंक्शन के अंदर कोड के सिंटैक्स में कभी-कभी कुछ गलत यह त्रुटि फेंकता है। अपने फ़ंक्शन को सही ढंग से जांचें। मेरे मामले में यह तब हुआ जब मैं Json क्षेत्रों को मूल्यों के साथ निर्दिष्ट करने की कोशिश कर रहा था और बृहदान्त्र का उपयोग कर रहा था: समान संकेत के बजाय असाइनमेंट बनाने के लिए ...

— अमितेश रंजन
स्रोत

0

मेरे पास दो अलग-अलग जावास्क्रिप्ट फ़ाइलों में परिभाषित एक ही नाम के दो नियंत्रक थे। चिढ़ना कि कोणीय एक नेमस्पेस संघर्ष का संकेत देते हुए एक स्पष्ट त्रुटि संदेश नहीं दे सकता है।

— thebiggestlebowski
स्रोत

0

मैं इस ट्यूटोरियल के बारे में निश्चित नहीं हूं, लेकिन मुझे एक ही समस्या थी जब मैं फ़ाइल को ग्रंट / गुलप कम करने की प्रक्रिया में शामिल करना भूल गया था।

grunt.initConfig({
  uglify: {
    my_target: {
      files: {
        'dest/output.min.js': ['src/input1.js', 'src/missing_controller.js']
      }
    }
  }
});

उम्मीद है की वो मदद करदे।

— पैट्रिक बेगो
स्रोत

0

अपने पत्र को भी देखें। मैंने इस बग का पीछा करते हुए एक अच्छा घंटा बिताया।

<section id="forgotpwd" ng-controller="ForgotPwdController">

जब मैं नियंत्रक का नाम देता हूं

angular
    .module('app')
    .controller('ForgotpwdController', ForgotpwdController);

उन सभी को लगातार नाम दिया जाना चाहिए, इस मामले में कम केस पी के साथ p wCController भूल गए ।

— जेसन मार्तजया
स्रोत