Error message in AngularJS: `$scope` is not defined in `onload` event

While experimenting with different methods for loading an alert on load using angularJS, I came across a particular approach:

http://jsfiddle.net/AQ533/9/

JS

$scope.init = function () {
  ($window.mockWindow || $window).alert('Hello');
};

HTML

<div data-ng-controller="myCtrl" data-ng-init="init()">
<span id="logo">Just a</span><span id="small" >PREVIEW</span>    
</div>

An issue arises where I encounter the following error:

Uncaught ReferenceError: $scope is not defined

I need help to identify and correct the mistake in my implementation. Can someone assist me, please?

javascriptangularjs

Answer №1

In order to access $scope, you need to define myCtrl:

function myCtrl($scope, $window) {
    $scope.init = function () {
      ($window.mockWindow || $window).alert('Hello');
    };
}

Check out the updated fiddle.

Note: Make sure your fiddle is wrapped in a div with ng-app. This lets Angular know where the application's global scope is located, enabling it to compile controllers and other components within.

Remember to pass $scope as an argument when implementing the controller myCtrl, along with any dependencies like the $window service.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on utilizing a variable within req.body in Node.js

My goal is to extract data from a dynamically generated form, but I am unsure of how many rows will be generated. Here is the form using EJS: <form action="/attendance-data" method="post"> <% var i=0 %> <% rows.forEach(function(item){ ...

javascriptnode.jsexpressejs

Collecting numerous user-input data from dynamically generated fields

I am working on a simple form in Laravel where users can add multiple forms dynamically using AJAX. Here is the link to my code on jsfiddle: dynamic adding field by user Below is the HTML structure: <form id="paramsForms"> {{csrf_f ...

javascriptphpjquerylaravelbootstrap-4

Which HTTP headers pertain to the loading of iframes? nuxt-helmet

Can anyone explain which security headers are associated with iframe loading issues and may prevent the iframe from being loaded? I implemented nuxt-helmet to configure security headers in my nuxt project. However, after uploading my site to a server loca ...

javascriptvue.jshttpiframenuxt.js

Is it Possible to Utilize Gridster Across Multiple Tabs?

My goal is to build several dashboards using angular-gridster2 in angular 8. Each dashboard will be located within a separate tab, and I am currently encountering some issues with this setup. For example, if the first tab has 3 gridster items and the sec ...

javascriptangulartypescriptangular8angular-gridster2

What is the best way to retrieve the content from the MongoDB Document in my GET request?

I encountered an issue while attempting to access the Question field within the JSON document body stored in a MongoDB database. Upon executing the GET request, the result displayed as follows: { "_readableState": { "objectMode": true, "highWaterM ...

javascriptnode.jsmongodbexpress

Tips for directing the scroll according to the current selection class

I am attempting to focus the scroll based on the selected class when clicking on the previous and next buttons. How can I achieve this functionality? Please review my code on https://jsfiddle.net/kannankds/bcszkqLu/ <ul class="kds"> <li>tile ...

javascriptjqueryhtmlcss

Creating a flexible image layout within a container with relative positioning

I attempted to create a basic slideshow with images sliding from right to left as an animation: let slides = document.querySelectorAll('.img-container'); let l = slides.length; let i = 0; setInterval(function(){ i = (i + 1) % l; if(i == 0){ f ...

javascripthtmlcss

Verify the compatibility of the device with ScreenOrientation.lock() function - An error occurred indicating that screen.orientation.lock() is not supported on this particular device

I've been trying to implement ScreenOrientation.lock() according to the documentation, but I'm having trouble getting it to work correctly. https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/lock When I use window.screen.orienta ...

javascriptcsstypescript

jQuery Waypoints Error: The sticky functionality is missing and cannot be utilized in this context

Trying to anchor an element at the top of a WordPress page using the jQuery Waypoints plugin. <script src="path/to/waypoints.min.js"></script> <script> $('#myelement').waypoint('sticky'); </script> However, t ...

javascriptjquerywordpressjquery-waypoints

Using Iron Router to develop a contacts application that features individual pages for every contact

I am currently working on a feature where each contact in the collection will have specific values such as first name, last name, and email. Whenever a contact is selected from the list, I want it to redirect to a second page where all the details for that ...

javascriptmongodbmeteoriron-router

Design a model class containing two arrow functions stored in variables with a default value

I am looking to create a model class with two variables (label and key) that store functions. Each function should take data as an input object. If no specific functions are specified, default functions should be used. The default label function will retur ...

javascripttypescript

When using JavaScript, an error may occur that says "Cannot read property 'style' of null," but strangely, this issue disappears when the code is copied and

I seem to be encountering an error in my codepen and I can't figure out what I'm doing wrong. It appears that I may have misplaced something, but I would greatly appreciate any help or explanation of my mistake. function on() { document ...

javascripthtmlcssnullsyntax-error

Error: Uncaught [🍍]: The function "getActivePinia()" was invoked without an active Pinia instance present. Ensure that you have called "app.use(pinia)" before attempting to utilize a store

I encountered an issue while trying to access a store in Pinia for my Vue web application. Despite installing Pinia and setting app.use(createPinia()), I keep receiving the following error message: Uncaught Error: [ ...

javascriptvue.jsvuejs3pinia

Is there a way to determine whether the uploaded file has been altered?

Is there a way for me to verify if a file uploaded by the user to my server has been altered since their last upload? My database includes a log table containing User_id and FileName (each User_id is unique). Once I have read the contents of the file, I d ...

c#javascriptasp.netfile-uploadfile-io

execute the function once the filereader has completed reading the files

submitTCtoDB(updateTagForm:any){ for(let i=0;i<this.selectedFileList.length;i++){ let file=this.selectedFileList[i]; this.readFile(file, function(selectedFileList) { this.submitTC(updateTagForm,selectedFileList); }); } } } ...

javascriptangulartypescript

Utilize Express to Refine HTTP Responses

I am currently in the process of developing a polls application using express. The structure of my data is as follows: var responseSchema = new mongoose.Schema({ responseText: String, voters: [] }) module.exports = mongoose.model('Responses& ...

javascriptjsonangularjshttpexpress

What is the best way to send props values to an input field in React without encountering any errors?

When I try to pass values from props to the current employee data in my update modal, I encounter an error. Most solutions online suggest using onChange in input fields, but that only shows the effect when a user starts typing. I need it to be visible when ...

javascriptreactjsjsx

Send the cookie with the JSON request

While logged into a secure website with a login, I came across some valuable data that is transmitted through the server in JSON format. By opening Chrome and inspecting the page using the "Network" tab, I discovered a URL utilizing XHR which contained the ...

javascriptjsoncookies

Learn how to manipulate the DOM by dynamically creating elements and aligning them on the same line

Providing some context for my page: The section I have always contains a single input field. Below that, there is an "add" button which generates additional input fields. Since only one field is required on the screen, the following fields come with a "de ...

javascriptcssdom

Error in Internet Explorer while using Angular: Cannot modify nodeValue of an undefined or null reference

Summary To see the problem in Internet Explorer and the solution, check out this Code Pen. By replacing <div>{{item.name}}</div> with <div>&nbsp;{{item.name}}</div>, the issue is fixed. But why? Detailed Question I'm dea ...

javascriptangularjsinternet-explorer