Constructing HTML expressions within an AngularJS controller

I am incorporating HTML from the AngularJS controller and showcasing this content in Bootstraps $uibModal as shown below:

$scope.phoneNumber = '0111111111';

var modalInstance = $uibModal.open({
    template: '<div class="modal-header d-flex flex-column align-items-center justify-content-center">\
                    <p class="font-h3 font-weight-medium">Please contact us on {{phoneNumber}}</p>                     

                </div>',
    appendTo: undefined,
    controllerAs: '$ctrl',
    controller: ['$uibModalInstance', '$timeout', '$state', function($uibModalInstance, $timeout, $state){

        //LOGIC GOES HERE

   }]
});

Even though the modal appears correctly, the dynamic expressions are not being evaluated.

Query

How can I ensure that the expression is evaluated in the controller before it is displayed to the user?

javascriptangularjs

Answer №1

To successfully communicate with the modal controller, make sure to include 'resolve' in your modalInstance and pass the desired information to it. Then, ensure that this data is injected as a dependency into the modal.

$scope.contactNumber = '0222222222';

var modalInstance = $uibModal.open({
    template: '<div class="modal-header d-flex flex-column align-items-center justify-content-center">\
                    <p class="font-h3 font-weight-medium">Please call us at {{$ctrl.contactNumber}}</p>                     
               </div>',
    appendTo: undefined,
    controllerAs: '$ctrl',
    resolve: {
    contactPhone: function () {
        return $scope.contactNumber;
      }
    },
    controller: ['$uibModalInstance', '$timeout', '$state', 'contactPhone', function($uibModalInstance, $timeout, $state, contactPhone){

        //CUSTOM LOGIC GOES HERE
        this.contactNumber = contactPhone;
   }]
});

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

Printing without sufficient paper will result in an incomplete printout

https://i.stack.imgur.com/jNlRr.jpg I am facing an issue with printing the last column "Potensi". The text in this column is not fully printed. How can I resolve this problem? I am using PHP. Thank you ...

javascriptcss

Using AngularJS, we can initiate an HTTP POST request by

Struggling to post an object using AngularJS. It seems like the data is not being sent properly. console.log(user); // {firstname: 'toto', lastname: 'tutu'} $http.post('/user/create', user).then(function(response) { consol ...

angularjsnode.jsexpress

Struggling to upload files using multer in Node.js?

Currently attempting to implement a feature where multiple files can be uploaded using a modal that includes a form with an input field. Here is the structure of my modal (in jade template format): #modalAddFile.modal form#uploadForm(enctype='mu ...

javascriptnode.jsexpresspugmulter

What steps can be taken to resolve the dependency problem with npm installation?

Attempting to incorporate npm install react-material-ui-carousel --save into my react project has presented a challenge. Upon installation, I encountered a dependency tree issue. Even after deleting the lock and npm modules files, followed by running npm ...

javascriptreactjsnpmmaterial-ui

AngularJS: Issues with data retrieval in parallel in $http get requests within a $.each loop

Attempting to fetch data for multiple IDs is the goal: (Simplified version, aiming to clarify) Controller: var idList = [39,40,41]; $.each(idList, function(key, value){ var dataObject = { type: "test", id: value }; var getData = DataFactor ...

javascriptphpjqueryangularjsajax

Using JavaScript to invoke a child method within a parent class

Is it recommended to call a child method from a parent class in JavaScript? In the given example in BaseComponent.js, calling this.constructHtml() is returning undefined. What could be causing this issue? Thank you! script.js import Header from './co ...

javascriptclassinheritanceecmascript-6

When using Webpack, there may be difficulties resolving relative path import of express static files

I am currently developing an Outlook add-in with an Express server running. To ensure compatibility with Outlook Desktop, I need to transpile JavaScript to ES5 using Webpack. Below is the simplified structure of my project: /public /javascripts ssoAu ...

javascriptnode.jsreactjsexpresswebpack

Exploring shader file content within three.js with the help of jQuery

I am trying to retrieve the content of a string that I have imported using HTML from within another script. To include the text file in question in the html file: <script src="shaders/fragmentshader.fs" id=fragmentshader></script> After impo ...

javascriptjqueryhtmlthree.jsshader

Updating Time by Adding Minutes using ngFor Loop in Angular 4

I'm currently developing a scheduler that requires user input for start time and the time between two games. I am looking to display the time in a loop using ngFor, incrementing by minutes each time. How can I accomplish this within an Angular 4 HTML ...

javascriptangulardatetimeangular2-forms

Transforming specific symbols (é è ë) with URL encoding

I am currently working on a JavaScript function that opens the user's email client with pre-filled content. However, I am facing difficulties in converting special characters so they display correctly in the email client (especially when passed throu ...

javascriptfunctionurlencode

Making an Axios call to retrieve data from VUEX storage

Is it common practice in the Vue.js (Nuxt.js) development community to send data to the server from a VUEX storage using code similar to this example? setTrackingData (state, value) { state.to_the_final_destination = value.to_the_final_destination; con ...

javascriptvue.jsnuxt.js

What is the best way to access the authData while deleting a user from Firebase?

Previously, when deleting data from Firebase, I used the following code: MyFirebaseRef.on('child_removed', function (oldChildSnapshot) { /* oldChildSnapshot => the data that's been erased */ }); Now, however, I want to achieve the ...

javascriptfirebase

Understanding the fundamentals of Handlebars IF statements

I am trying to accomplish a simple task in HBS, but I have hit a roadblock. How can I write a conditional statement for when the value is greater than 0? {{#if value > 0}} {{/if}} Additionally, does anyone have recommendations for a good HBS tutorial ...

javascriptexpresshandlebars.js

Organize the JSON data in a particular manner

I have a set of JSON data that looks like this: [ { "name": "Event 1", "sponsors": [ { "name": "Walmart", "location": "Seattle" }, { "name": "Target", "location": "Portland" }, { ...

javascriptarraysjsonvue.js

Merging HTML Array with jQuery

I am working with input fields of type text in the following code snippet: <input type="text" minlength="1" maxlength="1" class="myinputs" name="myinputs[]" > <input type="text" minlength="1" maxlength="1" class="myinputs" name="myinputs[]" > ...

javascriptjqueryhtml

How can I reset the default sorting in ui-grid after clearing other sorting options?

Currently utilizing UI-Grid 3.0 (). I want to make it clear to the user that there is a default sort applied to the data, but hide it while they are sorting by another column. When they remove their custom sort, I want the default sort to resume. However, ...

angularjsangular-ui-grid

Adjust the horizontal position of the background by +/- X pixels

Is there a way to adjust the background-position by a specific distance, say 20px, from its original position? For example: $(".selector").animate("slow").css("backgroundPosition", "center -=20px"); (Unfortunately, this approach doesn't yield the d ...

javascriptjquery

JavaScript - Combine objects by summing values with matching keys

Below is the given array : [ { "Date": "2019.07.08", "Organisation": "A", "Client": "Client1", "Product": "Pen", "Quantity": "1120" }, { "Date": "2019.07.08", "Organisation": "A", "Client": "Client1", "Product": " ...

javascriptarraysjsonobject

Transform object into an array by flattening it

I'm currently working on a task where I have an object that needs to be transformed into an array with the property as the key. The structure of the object is as follows: { Cat: { value: 50 }, Dog: { value: 80 } } The desired output should ...

javascriptarraysobjectecmascript-6

What's the best way to update the value of an angular field upon submission?

Could someone please provide instructions on how to update the myName variable when the "submit" button is pressed? Thank you! app.js: app.controller('SomeController', ['$scope', 'emails', function($scope, emails) { emails ...

javascripthtmlangularjsangularjs-scope