Issue encountered when attempting to modify the directive when the drop-down list is changed in AngularJS

Experiencing issues updating the directive when the drop down list is changed using AngularJS. Below is my application code:

HTML Code

<div ng-app="myApp" ng-controller="MyCtrl">
    <select ng-model="opt" ng-options="font.title for font in fonts" ng-change="change(opt)">
    </select>
    <p>
        {{opt}}</p>
    <br />
    <h3>
        Text Is
    </h3>
    <div id="tstDiv" testdir ct="ct">
    </div>
</div>

Controller and Directive Code

angular.module("myApp", []).controller("MyCtrl", function ($scope) {
        $scope.fonts = [
    { title: "Arial", text: 'Url for Arial' },
    { title: "Helvetica", text: 'Url for Helvetica' }
];
        $scope.opt = $scope.fonts[0];
        $scope.change = function (option) {
            $scope.opt = option;
        }
    })
        .directive("testDir", function ($timeout) {
            return {
                restrict: 'A',
                scope: {
                    ct: '=ct'
                },
                link: function ($scope, $elm, $attr) {
                    document.getElementById('tstDiv').innerHTML = $scope.selectedTitle;
                }
            };
        });

Check out the fiddle here.

Answer №1

It seems you may need to monitor changes in that particular variable Your link function ought to resemble this

scope: {
    ct: '=ct',
    opt: '=opt'
},
link: function ($scope, $elm, $attr) {
    $scope.$watch('opt', function(newOpt, oldOpt) {
        document.getElementById('tstDiv').innerHTML = newOpt.title;
    });
}

Answer №2

Following the suggestions provided by @Ajaybeniwal, you can view the functional demo here.

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 can I access a store getter in Vue after a dispatch action has finished?

I am currently utilizing Laravel 5.7 in combination with Vue2 and Vuex. While working on my project, I have encountered an issue where Vue is not returning a store value after the dispatch call completes. The workflow of my application is as follows: Wh ...

After removing an item from the array, React fails to display the updated render

As a newcomer, I am struggling with a particular issue. I have implemented a delete button for each item in a list. When the button is clicked, the object in the firstItems array is successfully deleted (as confirmed by logging the array to the console), b ...

How can we fix the null parameters being received by the ModelPage function?

I've been learning how to successfully pass values to a Post method using AJAX in .NET Core 6 Razor Pages, but I am encountering some difficulties. Below are the relevant codes: Front end: function calculateSalary() { var dropdown = document.get ...

Information not displaying correctly on the screen

My latest project is a recipe app called Forkify where I am utilizing JavaScript, npm, Babel, Webpack, and a custom API for data retrieval. API URL Search Example Get Example The app displays recipes with their required ingredients on the screen. Addit ...

Encountered an issue loading a resource due to a lost network connection while using Safari 9 and JBoss WildFly 8.2

After successfully deploying my War file to the JBoss Wildfly 8.2 server, I attempted to access the application link from a remote MAC machine. The application opened correctly, but some functionalities were not working properly. An error message popped u ...

Using a for loop in Flot to display data from a JSON file

I am working on creating a dynamic flot graph that will adjust based on the data provided. The information for my flot graph is in JSON format, and here's an example of the dataset: { "total":[[1377691200,115130],[1377694800,137759],[1377698400,1 ...

Transforming a namespaced function into an asynchronous operation by utilizing setTimeout

Looking for help with making a function that uses namespaces asynchronous. The function is currently being called on the click of a button. var ns = { somemfunc: function (data) { alert("hello"); } } Edit: ...

Issue with Vue3 Button - property error not defined

I'm currently facing an issue with a button that isn't functioning as expected in the screenshot provided. I'm hopeful that someone can assist me with this. Button functionality The button itself is not clickable, but I am able to submit t ...

Troubleshooting: Resolving issues with Vue's global EventBus in my project

I am using Vue.js within a Laravel project and I am encountering an issue with the global event bus. I have created an event-bus.js file and imported it where needed. Although events are being generated upon clicking, there seems to be no reactions from th ...

Trouble with sending input through Ajax in HTML form

I'm facing a dilemma that I can't solve. The issue arises from a page (index.php) that begins by opening a form, then includes another PHP page (indexsearch.php), and finally closes the form. The included page works with a script that displays d ...

Does anyone know of a vite extension specifically designed for enhancing Hot Module Replacement in AngularJS applications?

We are in the process of transforming our AngularJS application by incorporating Svelte components and utilizing Vite for its build processes. While the integration of Svelte components has been smooth, any updates made to the AngularJS code necessitate a ...

I can't seem to figure out why my characters keep disappearing from the HTML string when I attempt to dynamically add HTML using JavaScript

I am currently facing an issue with dynamically adding links to a page. The links are being added successfully, however, the '[' and ']' at the beginning and end of the line are disappearing. Here is the code snippet from my .js file: ...

Efficiently managing errors with AngularJS and Mongoose

I have developed a straightforward AngularJS application that involves calling REST services. To interact with these services, I'm utilizing mongoose. While everything is functioning correctly, I am seeking ways to enhance error handling. Here is an e ...

Analyzing the contents of a JSON file and matching them with POST details in order to retrieve

When comparing an HTTP Post body in node.js to a JSON file, I am looking for a match and want the details from the JSON file. I've experimented with different functions but I'm unsure if my JSON file is not formatted correctly for my needs or if ...

Transform seconds into an ISO 8601 duration using JavaScript

Dealing with ISO 8601 durations can be quite tricky. Efficiently converting seconds to durations is my current challenge, especially in JavaScript. Stay tuned for my solution and the Jest test script coming up next. ...

Converting CSV files to JSON using angularJS

I'm having trouble converting a CSV to JSON using AngularJS. Below is the raw data I receive from the API - "sentby: Sanjay, sitename: Flipkart, PinCode: 080, stdnumber: 56477382, website: https://flipkart.com, status: Done". I need help converting ...

Modifying the value of a property in one model will also result in the modification of the same

As a beginner with Vue, I am looking to allow users to add specific social media links to the page and customize properties like text. There are two objects in my data - models and defaults. The defaults object contains selectable options for social media ...

Issue Detected at a Precise Line Number - Android Studio

Despite my numerous attempts to modify the specific line in question, including leaving it empty, turning it into a comment, or removing it entirely, the error message persists. I even went as far as deleting the class and creating a new one, but the same ...

Polyfill for window.showOpenFilePicker function

Could anyone recommend a polyfill for the window.showOpenFilePicker method? For reference, you can check out the documentation on MDN. ...

Integrating a Find Pano functionality into a Kolor Panotour

I used a program called Kolor to create a panorama. Now, I am attempting to integrate the "find pano" feature, which involves searching through the panoramic images for display purposes. I have come across an HTML file that contains the search functionalit ...