Tips for invoking the same directive twice with varying HTML content within the directive

Currently, I am working on a project that involves utilizing AngularJS material. Within this project, I am encountering an issue when calling a directive (

<sdiv-panel></sdiv-panel>
) twice within the DOM. The problem arises when I make modifications to elements in the HTML of the directive, resulting in the second call of the same directive returning a new HTML output.

Is there a way to address this issue effectively?

I am seeking solutions that enable me to call the directive with all the changes made in the HTML page related to the specific directive being called.

Below is a snippet of my code:

<md-content style="height:-webkit-calc(100% - 64px)"  flex class="stop-scrolling"  md-theme="{{vm.contentTheme}}" md-theme-watch="true">       
    <div style="height:-webkit-calc(50%)" layout="column" ng-repeat="cardrow in vm.cards" ng-show="vm.multipleview">         
        <div flex layout="row" layout-fill>           
            <md-card class="card" ng-repeat="card in cardrow"  >             
                <md-toolbar style="min-height:35px; height:40px" class="md-hue-1" ng-dblclick="vm.openFromLeft()">               
                    <div class="md-toolbar-tools">                 
                        <h1 >{{card.view.name }}</h1>                 
                        <md-menu >                   
                            <md-button ng-click="$mdOpenMenu($event)" class="md-icon-button" aria-label="More">                     
                                <i class="material-icons">more_vert</i>                   
                            </md-button>                   
                            <md-menu-content >                     
                                <md-menu-item ng-repeat="view in vm.views" >                       
                                    <md-button ng-click="card.view=view" class="md-hue-2" >{{view.name}}</md-button>                     
                                </md-menu-item>                   
                            </md-menu-content>                 
                        </md-menu>               
                    </div>             
                </md-toolbar>             
                <md-card-content flex class="cardcontent"  >               
                    <sdiv-panel card={{card.view.element}} view={{card.name}}_4 >               
                    </sdiv-panel>             
                </md-card-content>           
            </md-card>         
        </div>       
    </div>     
    <div ng-hide="vm.multipleview"  >       
        <md-content layout-fill>         
            <md-tabs md-dynamic-height md-border-bottom >           
                <div ng-repeat="cardrow in vm.cards">           
                    <md-tab  ng-repeat="card in cardrow " label="{{ card.view.name }}">             
                        <!--<md-tab  ng-repeat="card in vm.tabtable " label="{{ card.name }}">-->             
                        <md-content layout-fill="" flex=""  style="margin-top: 10px" >               
                            <div style="margin-bottom: 10px" >                 
                                <sdiv-panel card={{card.view.element}}  view={{card.name}}_1 ></sdiv-panel>               
                            </div>             
                        </md-content>           
                    </md-tab>           
                </div>         
            </md-tabs>       
        </md-content>     
    </div>   
</md-content>
javascriptangularjsangularjs-directive

Answer №1

Below is the code snippet for my custom directive: (function() { 'use strict';

angular.module('sdivMaterial.panel') .directive( 'sdivPanel', function($compile) { return { restrict: "E", replace: false, scope : { card: "@", view:"@" }, template: "", link: function postLink($scope, $element, $attr) { $attr.$observe('card', function(data) { console.log("Updated data ", $scope.card, " : ", $scope.view); var html = $scope.card; $element.html(html); $compile($element.contents())($scope); }, true); } } }) })();

Let's take a look at an example usage in my main.html file: {{card.view.name }} more_vert {{view.name}} -->

Answer №2

My custom directive code:

    (function() {'use strict';
    angular.module('sdivMaterial.panel')
    .directive(
    'sdivPanel', function($compile) {
    return {
    restrict: "E",
    replace: false,
    scope : {
      card: "@",
      view:"@"
    },
     template: "",
     link: function postLink($scope, $element, $attr) {
     $attr.$observe('card', function(data) {
      console.log("Updated information ", $scope.card, " : ", $scope.view);
      var htmlContent = $scope.card;
      $element.html(htmlContent);
      $compile($element.contents())($scope);
     }, true);
   }
  }
 })
})();

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

Creating a spacious text box for an enhanced Ajax search feature

I'm currently working on an AJAX application that allows users to input the name of a movie, and then loads results from the database through jquery using a PHP API. However, I'm facing a challenge in implementing a text box with the following re ...

javascripthtmlcssajax

Exploring the possibilities of video textures using Three.js in combination with Google Cardboard

Looking to incorporate a video texture in Three.js by following the approach demonstrated in this example: . Additionally, I am keen on utilizing the Google Cardboard Chrome API for my site, as outlined here: . However, upon testing the program on Chrome ...

javascriptthree.jshtml5-videogoogle-cardboardvirtual-reality

The system encountered an error while trying to access the property "slug

I am currently working on a project that involves using next.js and wordpress. I have set up my api.js file, but I encountered an issue when trying to access the [slug] property from another component. The error message displayed is "Typerror: Cannot read ...

javascriptreactjsecmascript-6next.js

dropdownlist of mvc3 operators

Is there a better way to implement a dropdown list in MVC3 that looks like the one in this HTML/JS example? I attempted to achieve this using the following code: Model: public enum Operator { GreaterThan = '>', LessThan = '< ...

javascript.netasp.net-mvc-3

What is the best way to isolate particular components of an argument and store them in separate variables?

Currently, I am facing a challenge in extracting the name and id of an emoji from a discord argument using discord.js. The input provided to me is <:hack_wump:670702611627769876>, and my goal is to retrieve var id = '670702611627769876' alo ...

javascriptnode.jsargumentsdiscorddiscord.js

Why is my JavaScript sorting function not working after using push method?

Help me troubleshoot: Why aren't the results the same in IE9 and FF? function TestArrayOperationsClick() { function sortNums(a, b) { return a - b; } var array = [6, 4, 2, 8]; console.log("Initial Array: " + array); array.sort(sortNum ...

javascriptsorting

Make sure to validate onsubmit and submit the form using ajax - it's crucial

Seeking assistance for validating a form and sending it with AJAX. Validation without the use of ''onsubmit="return validateForm(this);"'' is not functioning properly. However, when the form is correct, it still sends the form (page r ...

javascriptphpjqueryajax

Save a text as a CSV file while also preserving any commas within the

I am trying to export a string to csv format while ensuring that commas inside the string are not treated as separators. For example: [{"name":"ALIASED_LINE_WIDTH_RANGE","value":{"0":1,"1":1}}] Even when ...

javascriptstringcsv

When I modify the state in Vue.js, the two-way binding feature does not seem to function properly

I'm facing an issue with my dynamic array "slots" of objects which looks something like this: [{"availability": 1},{"availability": 3}] I render multiple inputs in Vue.js using v-for like so: <div v-for="slot in array"><input v-model="slot.av ...

javascriptvue.jsvue-reactivity

Other browsers, such as Chrome and Firefox, are visible, except for Safari

https://testing007.s3-api.us-geo.objectstorage.softlayer.net/1A23CDC6F75811E6BFD706E21CB7534C---prof__6.jpg This link displays correctly on browsers like Chrome and Firefox, but does not show up on Safari. ...

jqueryhtmlangularjs

Developing a Customized Modal with Backbone.js

As a newcomer to Backbone, I have been trying to create a Modal in my application by setting up a base Modal class and then extending it for different templates. However, despite conducting some research, I haven't been able to find a solution that fi ...

javascriptjquerynode.jsbackbone.jsexpress

The compatibility between Node JS and Vue JS front-end seems to be glitchy and

I am currently developing a Node JS backend application and Vue JS front-end. In order to authenticate users, I need to implement sessions in the API. For my backend server, I am using the following components: express (4.18.2) express-session (1.17.3) c ...

javascriptnode.jsmongodbexpressexpress-session

How can we ensure that the Material-UI <Select> component is as wide as the widest <MenuItem>?

I am attempting to adjust a Mui Select field so that it is the same width as its largest MenuItem. Despite trying to utilize the autoWidth prop on the Select component, I have not been able to achieve the desired result. To better illustrate the issue, I h ...

javascriptreactjsmaterial-ui

Working with nested functions in angularjs allows you to declare a function within another

Initially, there is a primary function: $scope.loadDataFromToMonth= function (from,to,year) { // $scope.loadDataFromToMonthArrivee(from,to,2016); var url = servername+'admin/dashboard/getIncidentDepartByMonthFromTo/'+from+'/'+t ...

angularjsjsoncharts

Changing the key of a JavaScript request object into a string variable

Just starting out with programming. The API post call requires an object variable (derived from a variable) to be passed as a string like this: "option": { "235": “30” }, { "238": “32” } In my Angular 6 code: ...

javascriptangularecmascript-6

Is it possible to invoke a Javascript function from a coffeescript file?

Struggling to invoke a javascript function from a Coffeescript file within my $(document).ready(), but it seems like the function is not being executed. The function I intend to call originates from an external source that I have included in the head sect ...

javascriptjqueryruby-on-railscoffeescript

Achieve Dual Functionality with Vue.JS Button within a Parent Element

My parent component structure looks like this: <template> <b-container> <b-modal id="uw-qb-add-item-modal" ref="uw-qb-add-item-modal" title="Enter Item Number" @ok="handleNewItem"> <f ...

javascriptvue.jsvue-component

How can I change a PHP for loop to Javascript?

Can the following code be converted to JavaScript? for (let lift of liftDetails) { document.write('<option>'+ lift["LiftMakes"] +'</option>'); } ...

javascriptphpforeach

React is choosing to re-render only one of the setState functions, neglecting the other

I'm currently in the process of developing a basic Tic Tac Toe game using React. The Objective: Each button in the game has its own state. When a button is clicked, it should change from ' ' to an 'X' and update the player's ...

javascriptreactjsasynchronoussetstatetic-tac-toe

NodeJS with Selenium - Attempting to Choose a Button

The HTML <button class="RCK Hsu USg adn gn8 L4E kVc iyn S9z Vxj aZc Zr3 hA- Il7 hNT BG7" tabindex="0" type="submit"> <div class="KS5 hs0 mQ8 un8 tkf TB_"> <div class="xuA"> ...

javascriptselenium-webdriver