как два раза вызывать одну и ту же директиву при изменении HTML принадлежит директиве

Question

как два раза вызывать одну и ту же директиву при изменении HTML принадлежит директиве

0

Я работаю над проектом с использованием материала angularJS. Я <sdiv-panel></sdiv-panel> директиву (<sdiv-panel></sdiv-panel>) в DOM, но проблема в том, что я модифицирую некоторый элемент в HTML директивы, второй вызов той же директивы возвращает новую HTML.

Как я могу это решить?

Я ищу решения, которые заставляют меня вызывать директиву со всеми изменениями на странице HTML, в соответствии с директивой, которую я вызываю.

Мой код:

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

Mahmoud 30 май 2016, в 11:46

Источник

1

Можете ли вы представить какую-либо реализацию вашей директивы и пример использования, пожалуйста?
Silvinus 30 май 2016, в 09:10
0

Вы должны использовать изолировать область видимости для директивы, а для html использовать transclude. Я надеюсь, что это помогает
DK3 30 май 2016, в 09:12
0

я добавляю код как ответ. Спасибо
Mahmoud 30 май 2016, в 11:51
0

да, я использую это в моей директиве, но это не работает
Mahmoud 30 май 2016, в 11:58

Показать ещё 2 комментария

Теги:

javascript

angularjs

angularjs-directive

2 ответа

Ещё вопросы

Можете ли вы представить какую-либо реализацию вашей директивы и пример использования, пожалуйста?
Вы должны использовать изолировать область видимости для директивы, а для html использовать transclude. Я надеюсь, что это помогает
я добавляю код как ответ. Спасибо
да, я использую это в моей директиве, но это не работает

Mahmoud · Answer 1 · 2016-05-30T10-58-00.000Z

Вот моя директива:

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

Mahmoud · Answer 2 · 2016-05-30T10-06-00.000Z

Вот моя директива: (function() {'use strict';

angular.module('sdivMaterial.panel').directive('sdivPanel', function ($ compile) {return {restrict: "E", replace: false, scope: {card: "@", view: "@"}, шаблон: "", ссылка: функция postLink ($ scope, $ element, $ attr) {$ attr. $ наблюдать ('card', function (data) {console.log("Обновленные данные", $ scope.card, ":", $ scope.view); var html = $ scope.card; $ element.html(html); $ compile ($ element.contents()) ($ scope);}, true);}}}) })();

пример моего main.html: {{card.view.name}} more_vert {{view.name}} ->