Different ways to change the value of a variable in an isolated scope using another directive

Utilizing a directive with two modes, edit and preview, multiple times in my codebase.

function () {
    return {
        restrict: "E",
        scope : {
            model : '='
        },
        [...]
        controller : function($scope, $element){
            $scope.switchToEdit = function(){
                $scope.isEditMode = true;
            }
            $scope.switchToPreview = function(){
                $scope.isEditMode = false;
            }
         }
     }}

When switching to edit mode on an element, any other element already in edit mode should revert back to preview mode. How can this be achieved?

javascriptangularjsangularjs-directive

Answer №1

If you want to notify all other scopes that you are entering edit mode, you can utilize a $broadcast function.

Check out this functional fiddle link: http://jsfiddle.net/gvuxbo7m/

controller : function($scope, $element, $rootScope){
    $scope.isEditMode = false;
    $scope.switchToEdit = function(){
        $scope.isEditMode = true;
        $rootScope.$broadcast('switchToEdit', $element);
    }
    $scope.switchToPreview = function(){
        $scope.isEditMode = false;
    }
    $rootScope.$on('switchToEdit', function(event, $el){
        if($el !== $element) $scope.switchToPreview();
    });
 },

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

Show divs in identical position when clicking

There are 4 section divs that need to be displayed in the center of the page when clicked, but the last one appears further down. This is likely due to the flex box nature. What is the best way to ensure all sections appear at the exact same location? Ano ...

javascripthtmlcss

Unable to reach the sub-component of the JSON object that was returned

For some reason, I can't seem to access a sub object of a returned $Resource object that fetched a group of JSON objects. It's baffling me. Resource > $resolved: true > $then: function (b, g) {var j=e(),h= > data: Object > 519bc5f6 ...

javascriptjsonangularjs

Ajax is working effectively as the first post is successful and the second post is able to retrieve data

UPDATE: I resolved the issue by relocating my form submitter script from the Header to the bottom of the jamesmsg.php page (the included one). By doing this, the functions are always re-loaded and attached to the "new" form each time the div is refreshed. ...

javascriptphpajaxformssubmit

What is the best way to display values from a Localstorage array in a tabular format using a looping structure

I have set up a local storage key 'fsubs' to store form submissions as an array. Here is how I am doing it: var fsubs = JSON.parse(localStorage.getItem('fsubs') || "[]"); var fcodes = {"barcodeno" : this.form.value.barcode, "reelno" : ...

javascriptangulartypescriptlocal-storageangular-local-storage

Enable automated addition or alteration of phone numbers through Twilio's API

I'm looking to programmatically add and edit phone numbers using the API on this Twilio link. Can you guide me on how to achieve this? ...

javascriptphptwilio

If other options fail, Else If may not be a suitable choice

This is the process: switching from Issue: x==0||1 to x==0||x==1 etc. This code runs from an .html file <body> <div class="" id="pimg1"> </body><script> var x=new Date().getMonth(); if (x == 0||x == 5||x == 2){docu ...

javascripthtmlcsslogical-operators

Ways to clear dropdown selection in Vue based on a specific condition?

I am currently developing a dropdown menu for selecting visit status options, which include "pending," "canceled," "rejected," and "approved." In the case of an approved visit status, I would like the dropdown selection to only display the options for "can ...

javascriptvue.jsvuejs3

Ensuring consistency in application state through transitions between single page views and multi-page views

Advancements in technology often bring back old issues that we thought were already solved. Back in the days when PHP and ASP were considered cutting-edge, the problem of view states plagued web developers. Imagine having a page with multiple select combo ...

angularjs

JasmineJS: manipulating the DOM to achieve the desired outcome

Currently, I am in the process of writing unit tests for a function that requires fetching values from the DOM for processing. getProducts: function() { //Creating query data var queryData = {}; var location = this.$('#location').val(); ...

javascriptjquerybackbone.jsjasminesinon

Steps for resolving the issue: TypeError: logger.logSuccess is not a function

As I work on building a back-end service with Spring MVC and an AngularJS front-end client, I encountered an error in my console while attempting to send a message to the user upon successful file upload. Can anyone help me identify where the issue lies in ...

javaangularjsspring

Need to ensure that an AJAX form doesn't resubmit without the need for a page

Encountering a peculiar mystery issue here... I have created a button on a webpage that triggers a form submission. The form is enclosed within a DIV, which dynamically updates to display the modified data. (this is embedded in a smarty template) form: ...

javascriptphpjqueryhtmlajax

Transferring documents using JavaScript

I have been using the following method to upload files to my Laravel backend: setFile(id, e) { let self = this; let reader = new FileReader(); reader.readAsDataURL(e.target.files[0]); reader. ...

javascriptvue.js

What is the process for verifying a checkbox after it has been selected?

I simplified my code to make it easier to understand const [factor, setfactor] = useState(1); const [nullify, setNullify] = useState(1); const Price = 10; const Bonus = 15; const finalPrice = (Price * factor - Bonus) * nullify; // start ...

javascriptreactjsreact-hooks

Angular PUT request failing to send updated data in XHR header

As a newcomer to AngularJS, I am in the process of creating an Edit/Update function. The edit functionality is quite simple; it merely copies the model data into the form inputs: // Edit post $scope.editPost = function(post){ $scope.title = post.title; ...

angularjs

What is the best way to create separate positions for items within a single div?

https://i.sstatic.net/FQRY4.jpgAfter looping through various names and accessing them from a single div using {{item}}, I encountered an issue. All the names are within one parent element. This is the code snippet: <div :style="image" cl ...

javascripthtmlcssvue.jsflexbox

Error encountered when trying to access the _id property in React Components using MongoDB and passing a Key: TypeError - Property _id is undefined

I've encountered an issue when trying to pass a field from MongoDB into a React Component. Here is the snippet of code I'm working with: import React from 'react'; import ReactDOM from 'react-dom'; import { Meteor } from &apo ...

javascriptreactjscomponents

Retrieving Information from API using Vue.js

In the code snippet below, I am displaying data from an API for all flats on a single page. However, I am facing difficulty in showing the floor number for each flat. The JSON body is as follows: { "response": [ { "fl ...

javascriptvue.js

What could be causing this function to malfunction?

Apologies for any inaccuracies in technical terms used here. Despite being proficient in English, I learned programming in my native language. I am currently working on a project using the latest version of Angular along with Bootstrap. I'm unsure if ...

javascripthtmlangulartypescriptfunction

Guide on implementing a Pug for loop using AJAX

For my school project, I am developing a web application similar to Tinder using Node.js, Express, and Pug. The main goal of the project is to provide potential matches to users based on either their proximity or common interests with the current user. Whe ...

javascriptjqueryajaxnode.jspug

Troubleshooting issue: Click function not responding inside Bootstrap modal

Below is the JavaScript code for my click function $(".addPizza").on("click", function(event) { event.preventDefault(); console.log("hello") let userId = $("#userId").attr("data-id"); let pizzaRecipe = $('#pizza-recipe').val().trim(); ...

javascriptjqueryajaxbootstrap-4