How can we refresh the model in Angular.js from a section of the application that has not been 'angularized' yet?

UPDATE: Found a similar question at Call Angular JS from legacy code

Working on adding a new feature to an existing application using Angular. Unable to do a complete rewrite, so the challenge is integrating Angular models with the rest of the app that directly manipulates the DOM.

How can I update a model in Angular without straying too far from its inherent design patterns?

Provided below is a simplified example with event handlers in the controller. Seeking possible improvements or alternative solutions.

NOTE: The button mentioned is not a part of the actual application. It's for illustration purposes only.

http://plnkr.co/edit/XoD6hPKs2ou3oqpuVhnQ?p=preview

JS:

var testApp =  angular.module('testApp', []);
testApp.controller('audioController', function ($scope) {

$scope.settings = {audiostop: "00:30"};

 $('button').click(function(){
  $scope.loadSettings({audiostop: '23'});
});

$scope.loadSettings = function (data) {
     $scope.$apply(function(){
         $scope.settings = { audiostop: data.audiostop};
    });
}

});

Another approach could be defining a function for an external object within the controller:

NAMESPACE.someobject.loadSettings = function (data) {
     $scope.$apply(function(){
         $scope.settings = { audiostop: data.audiostop};
    });
}

UPDATE: Realized that implementing dependency injection might provide a solution, further details found here: http://docs.angularjs.org/guide/di

Answer â„–1

To start, avoid using $('button').click. With Angular, simply include an onclick handler directly in the button's HTML code for a cleaner approach.

When it comes to updating settings, consider implementing a settings Service - a dedicated class that manages your settings. Using a service is preferable to adding functions to scope as it allows for reuse across various scopes and prevents cluttering scopes with data-related tasks.

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

Sending simple form information through AJAX to a PHP web service

Attempting to send form data via jQuery and Ajax to a PHP web service (php file) for echoing the results. This is my index.html file <html> <head> <title>PHP web service &amp; AJAX</title> <link rel="stylesheet" type="text/ ...

The function $scope.removeNinja cannot be found

As a beginner in Angular, I encountered an issue while working on a project that involved creating a Directory of ninjas with various functionalities implemented using Angular. Here is a snippet of my HTML file: <!DOCTYPE html> <html lang="en" n ...

What are the steps for implementing CORS?

I recently attempted to set up Ajax calls and stumbled upon the following code snippet: <!DOCTYPE html> <html> <body> <p id="demo">Let AJAX update this text.</p> <button type="button" onclick="loadDoc()">Updat ...

The functionality for selecting text in multiple dropdown menus using the .on method is currently limited to the first dropdown

Having trouble selecting an li element from a Bootstrap dropdown and displaying it in the dropdown box? I'm facing an issue where only the text from the first dropdown changes and the event for the second dropdown doesn't work. <div class="dr ...

The script for choosing pages is malfunctioning

I'm having trouble with a script on my website. It works on the index page, but not on other pages. <div id="pages"></div>   <script>      a = location.href;      b = a.split('-');      c = b.length;    ...

Sophisticated Sidebar Design using Bootstrap 5

Looking to design a responsive sidebar for navigation on my page, with selected and hover properties. Visualizing the selected option to appear like this: Selected (active) option in sidebar The goal is to have the image cover the left side of the backgr ...

An Easier Way to Incorporate an Image Insert Button into CKEditor

Having trouble displaying the Insert Image button in CKEditor 4.1.1? Here's my current configuration setup in config.js: CKEDITOR.editorConfig = function( config ) { // Customizing default configuration here. // For more details, check: http: ...

JavaScript is able to access the HTML content of the previously opened tab when saving the window

Seeking advice from the knowledgeable community at Stack Overflow! I have a project that I'm unsure how to start, and I could use some fresh ideas. My goal is to access the HTML source code of a previously opened tab or one that is still loading on m ...

Validation of a string or number that is not performing as expected

I have been working with the yup library for JavaScript data validation, but I am encountering unexpected behavior. Despite thoroughly reviewing their documentation, I cannot pinpoint where I am misusing their API. When I run the unit test below, it fails ...

Leverage custom attributes for user input in Ionic 2

Trying to incorporate custom attributes into inputs and divs has been a challenge for me. At first, when I hardcoded the data like this: <input type="hidden" class="test" value="0" custom-data='12345' /> everything worked perfectly. Howev ...

Prevent Scrolling of Body Content within a Specified Div

In my current situation, I am dealing with a large number of divs (over 300) that are being used as part of an interactive background. The issue arises when viewing the page on mobile versus desktop – there are too many divs on desktop, causing excessive ...

Display the size of the data array in VueJS once the data has been retrieved from the API

Using Vue JS, I have been attempting to retrieve data from an API. My goal is to determine the length of the array and then log it to the console using a method. However, every time I try to do this, the value logged is always "0" instead of the actual le ...

FirebaseError: The type 'Hc' was expected, but instead, a custom Yc object was provided

I've encountered an issue while attempting to perform a batch entry. The error I'm facing involves passing an array in a .doc file. Interestingly, this approach seems to work perfectly fine on another function where I pass an array into a .doc us ...

How to Implement a Loop Inside a JavaScript Alert or Prompt?

Seeking clarity: Is it possible to embed code into an alert() or prompt()? For example, is there a way to include a loop or add data to the alert() or prompt just before execution or during execution? -Appreciate any help ...

A guide on designing a personalized search bar for MUI-Datatables with a sleek outlined style

Check out the default UI from MUI-Datatables v4.3.0 here: https://i.stack.imgur.com/rbHgD.png I want to create a style similar to this: https://i.stack.imgur.com/AUHqC.png Just so you know, I am using the following packages: "@mui/material": &q ...

Looking for a way to execute code exclusively when the 'other' option is chosen? Let's tackle this challenge with Javascript and swig

I am looking to utilize swig (my chosen templating engine) for incorporating JavaScript code that will only display when the user selects the 'other' option from the select menu. <div class="form-group"> <select class="custom-select"&g ...

vue form is returning empty objects rather than the actual input data

I am attempting to transfer data from my component to a view in order for the view to save the data in a JSON file. I have verified that the view is functioning correctly as I attempted to log the data in the component and found it to be empty, and the r ...

Retrieving the _id of a new document in MongoDB using Node.js

I am facing a challenge understanding MongoDB after transitioning from using relational databases. Currently, I am attempting to store an image with the following code: exports.save = function ( input, image, callback) { console.log('Image P ...

I'm attempting to create a button using html, but I'm puzzled as to why it's not functioning as expected

I've been working on creating a button that, when pressed, generates a new div string based on the node.innerHTML code. For some reason, my code doesn't seem to be functioning properly and I'm not sure why. Here's the HTML: <input ...

Having difficulties redirecting with the button's onclick function

I'm struggling to redirect users to another page using a button (assuming the hostname is localhost:8000) $('#getFruit').attr('onclick', window.location.host + '/getFruit/banana') <script src="https://cdnjs.cloudfl ...