wie zwei mal die selbe Direktive mit der Änderung in HTML aufzurufen, gehört zu der Direktive

Question

Ich arbeite an einem Projekt mit angularJS Material. Ich rufe eine Direktive (<sdiv-panel></sdiv-panel>) zwei Mal in einem DOM auf, aber das Problem ist, wenn ich ein Element im HTML der Direktive modifiziere, gibt der zweite Aufruf derselben Direktive ein neues HTML zurück.

Wie kann ich das lösen?

Ich suche nach Lösungen, die ich die Anweisung mit allen Änderungen in der HTML-Seite aufrufen, gehört zu der Richtlinie, die ich anrufe.

Mein 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> 

Answer 1

Hier meine Direktive ist: (function() { 'use strict';

angular.module ('sdivMaterial.panel') .directive ( 'sdivPanel', Funktion ($ compile) { zurückgeben { restrict: "E", ersetzen: false, Scope: { -Karte: "@", Ansicht: "@" }, Vorlage: "", Link: function postLink ($ scope, $ Element, $ attr) { $ attr $ beobachten ('Karte', Funktion. (Daten) { console.log ("Aktualisierte Daten", $ scope.card, ":", $ scope.view); var html = $ scope.card; $ element.html (html); $ compile ($ element.contents()) ($ scope); }, wahr); } } }) })();

ein Beispiel für meine main.html: {{}} card.view.name more_vert {{}} view.name ->

Answer 2

Hier ist meine Richtlinie:

(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); 
    } 
    } 
}) 
})();