What is the best way to initialize a JavaScript constructor in AngularJS, similar to using ng-init to define variables but calling the constructor in service.js?

I need help converting this code to AngularJS. The current code is in core JavaScript and I want to call a core JavaScript constructor from AngularJS. I have successfully defined how to call the service constructor in core, but I am unsure of how to call it from AngularJS. If anyone has any suggestions, please let me know.

In the data-ng-init, I would like to call the service constructor as follows: new service

Core JavaScript

 (function(){
    service = new service({
            on_connection_init : connectingIndicator,
            on_connection_inprogress : connectingProgress,
            on_connection_complete : connectedIndicator,
            on_connection_close : closedIndicator
    });

     service.submit("service_demo_keys", {});

});


/*AngularJS*/

 var app = angular.module('service', []);

   app.controller('sendtocluster', function($scope) {
    $scope.name = "connecting to service....";

});



   <div ng-app="service" ng-controller="sendtocluster"  data-ng-init="names=[{on_connection_init : 'connectingIndicator',on_connection_inprogress : 'connectingProgress',on_connection_complete : 'connectedIndicator',on_connection_close : 'closedIndicator'}]">




        <p>Name : <input type="text" ng-model="name"></p>
        <h1>Response:-  {{name}}</h1>


       <li data-ng-repeat="myObject in names"> 
    {{myObject.on_connection_init}} -    

    {{ myObject.on_connection_inprogress}}</li>

Answer №1

Consider using the $window object for better control.

To ensure the code runs before Angular is registered, inject it accordingly or load it in your index.html prior to Angular's inclusion.

// declare a global variable outside of Angular
var isVariableSet = true;

// define an Angular module and controller
var app = angular.module('myapp', []);
app.controller('MainCtrl', ['$scope', '$window', function($scope, $window) {
  $scope.variableIsSet = $window.isVariableSet;
}]);

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

How to trigger a function to run only once in React when the page is accessed or refreshed

I'm currently developing a search feature using Algolia search functionality. Users can input a search term from another site, be redirected to the search page, and have the search executed automatically. Once on the search page, users must utilize t ...

Attempting to create a dynamic dropdown menu with animated effects triggered by a key press

I've been attempting to construct a menu that initially appears as a small icon in the corner. Upon pressing a key (currently set to click), the checkbox is activated, initiating the animation. Most of the menu and animation are functional at this po ...

I'm perplexed as to why my JavaScript code isn't successfully adding data to my database

Recently, I delved into the world of NodeJS and Express. My goal was to utilize Node and Express along with MongoDB to establish a server and APIs for adding data to the database. Specifically, I aimed to write the code in ESmodules syntax for JavaScript. ...

Implementing a smooth transition effect on an ajax tab

I have a tab code that uses ajax data attributes to load content. The tabs are loaded with ajax from PHP code based on the data attribute. How can I add a fade in/out effect to the tabs' content? I've attempted it but haven't been successful ...

Place the outcome of the function into the div element's attribute

As a newcomer to HTML and JavaScript, I recently dove into using 3Dmol.js. Following a tutorial, I was able to create this code snippet that actually works: <script src="http://3Dmol.csb.pitt.edu/build/3Dmol-min.js"></script> <div id="el ...

Generate text in a random spot effortlessly

After doing some research on various development platforms, I stumbled upon this JSFiddle that seems to have a solution for my requirements. The only thing missing is the ability to input a specific word (without user input) and automate the process at fix ...

Is the concept of Controlled and Uncontrolled Components in VueJs similar to that of React?

When it comes to React, there is a distinction between controlled and uncontrolled components explained in detail at this link. Controlled components function within the React model where state is managed in the virtual DOM. In contrast, uncontrolled com ...

how can I include an AngularJS variable as a parameter in an onclick function?

I attempted to utilize an AngularJS variable as an argument value inside onclick() in order to invoke a JavaScript function. Can someone provide me with instructions on how to achieve this? Here is my code: <div onclick="deleteArrival({{filterList.id} ...

What is the correct way to utilize ng-if/ng-show/ng-hide to hide or show HTML elements within the app.run function

I am currently working on developing an app that loads views correctly. HTML: <body> <loading outerWidth='1000' outerHeight='1000' display='isReady'></loading> <div class='wrapper' ng-sho ...

Achieving asynchronous results in the parent function with TypeScript: a guide

The code structure provided is as follows: import {socket} from './socket'; class A{ Execute(...args[]){ //logic with Promises SomeAsyncMethod1().then(fulfilled1); function fulfilled1(){ SomeAsyncMethod2(args).then(fulfilled2); ...

Dynamically size and position elements to fit perfectly within the container

I am currently facing a challenge with my absolutely positioned elements that have different position.top and height values generated from the database. The main goal is to resolve collisions between these elements by shifting them to the right while adju ...

Determine the time variance in hours and minutes by utilizing the keyup event in either javascript or jquery

There are 6 input fields, with 5 input boxes designated for time and the result expected to display in the 6th input box. See the HTML below: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input ty ...

I am in need of a blank selection option using an md-select element, and I specifically do not want it to be

I'm currently utilizing Angular Material with md-select and I am in need of creating a blank option that, when selected, results in no value being displayed in the select dropdown. If this blank option is set as required, I would like it to return fal ...

Issue with Bourbon Bitters detected post-installation

Deciding to experiment with the Bourbon Sass framework, I embarked on the installation process. To use it in conjunction with yeoman/angular-generator, I had to downgrade Bourbon to v3.2.1 and Neat to v1.5 to avoid compilation errors. After the downgrade ...

What is the best way to create a loop within a JavaScript function?

I'm having some trouble with looping inside a function. It seems like my looping is not working properly and I need help fixing it, along with suggestions for the problem. :) Here's what I've tried: <script> function getImage1( ...

Styling for Print Media: Adjusting the horizontal spacing between inline elements

I have been developing a custom AngularJS point-of-sale (POS) system that requires printing receipts upon completing a sale. To achieve this, I am using ng-print to print out a sales summary displayed within a specific div element after hiding all other un ...

Give a CSS Element a specific class

Can all h3 elements be styled with the class responsive-heading using only CSS? Take a look at the CSS snippet provided for more clarity: h3 { .responsive-heading } /* The responsive-heading class is defined in another CSS file and includes: .respons ...

Method for displaying or concealing list items with an onClick event in React without relying on JQUERY

I'm working on a feature to show/hide a specific <li> element. While I know this can be achieved with JQuery, I prefer not to mix actual DOM manipulation with React's virtual DOM handling. With that in mind, I have assigned each <li> ...

What are the methods to alter validation for a Formfield based on the input from other Formfields?

My aim is to create a Form where input fields are required only if one or more of them are filled out. If none of the fields have been filled, then no field should be mandatory. I came across a suggestion on a website that recommended using "valueChanges" ...

Display a custom AngularJS directive on content loaded through $http request

I'm facing a dilemma. I have created a directive app.directive('a', function() { return { restrict: 'E', link: function(scope, elem, attrs) { elem.on('click', function(e){ ...