Используйте функцию ссылки в директивах для добавления различных элементов HTML

0

скрипка

У меня две кнопки. При нажатии он отображает модальный текст с текстом som. Но я также хочу добавить некоторые html динамически в зависимости от того, какая кнопка нажата.

Я попытался как $observe и $watch методы, но у меня возникают проблемы, делая работу.

вот мой код.

angular.module('TM', [])

.controller('protocolCtrl', function(){
    this.text = 'Now looking at the protocol part';
    this.modalId = 'protocolModal';
})

.controller('categoryCtrl', function(){
    this.text = 'Now looking at the category part';
    this.modalId = "categoryModal";
})

.directive('modalDirective', function(){
    return {
        restrict: 'E',
        scope: {
            ctrl: '=',
            modalId: '@',
        },
        template:  ['<div id="{{modalId}}" class="modal fade" role="dialog">', 
                      '<div class="modal-dialog">',
                        '<div class="modal-content">',
                        '<div class="modal-header">',
                        '<h4 class="modal-title">Modal Header</h4>',
                        '</div>',
                        '<div class="modal-body">',
                        '<p> {{ ctrl.text }} </p>',
                        '</div>',
                        '<div class="modal-footer">',
                        '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>',
                        '</div>',
                        '</div>', 
                        '</div>',
                        '</div>'].join(''),
        link: function(scope, element, attrs) {
            element.$observe('modalId', function(){
                var modal = element.find('#{{modalId}}');
                if(modal == 'protocolModal'){
                    element.find('#{{modalId}}').append('<div>this is a protocol test...</div>');
                } else {
                    element.find('#{{modalId}}').append('<div>this is a category test...</div>');
                }
            });
        }
    }
});
  • 0
    Вам не нужно вручную $watch или $observe . Если шаблон управляется $scope.modalId , используйте ng-if чтобы выбрать то, что отображается, например: <div ng-if="modalId === 'protocolModal'">protocol test</div> <div ng-if="modalId === 'categoryModal'">category</div> .
  • 0
    @NewDev Хм, я тоже попробую. Но я был бы очень признателен, если бы вы могли показать мне, что мне нужно изменить в моей скрипке, чтобы она работала с $observe или $watch :)
Показать ещё 2 комментария
Теги:
angularjs-directive

3 ответа

1
Лучший ответ

Я не думаю, что есть element.$observe - есть attrs.$observe scope.$watch и scope.$watch. У вас уже есть modelId в области, поэтому позвольте использовать это.

Кроме того, вместо шаткого .find по идентификатору, вводит элемент в качестве заполнителя для шаблона и replaceWith его соответствующим образом:

template: '<div id="{{modalId}}">\
             ...\
             <div class="modal-body">\
               <template-placeholder></template-placeholder>\
             </div>\
           </div>",
link: function(scope, element){
  // ...

  var unwatch = scope.$watch("modalId", function(val){
    var placeholder = element.find('template-placeholder');
    if(val == 'protocolModal'){
       placeholder.replaceWith('<div>this is a protocol test...</div>');
    } else {
      placeholder.replaceWith('<div>this is a category test...</div>');
    }

    unwatch(); // seems like you don't really need to set it again
  }
}
Поделиться
0

Если ваши две DOM-структуры различаются, вы можете использовать два разных шаблона в зависимости от некоторого значения параметра.

templateUrl можно указать как функцию, например:

angular.module('Joy', [])
    .controller('ProfileCtrl', ['$scope', function ($scope) {
    $scope.user = {
        name: 'Elit'
    };
}])
    .directive('profile', [function () {
    return {
        restrict: 'A',
        templateUrl: function (elem, attrs) {
            return 'style-' + attrs.color + '.html';
        }
    };
}]);

И используйте эту директиву как:

<div ng-app="Joy" id="play-ground" ng-controller="ProfileCtrl">
    <div profile color="red"></div>
    <div profile color="green"></div>
</div>

В этом случае, если color red, директива загрузит шаблон из style-red.html. В противном случае из style-green.html.

В вашем случае вы можете сохранить флаг во внешнем контроллере. Щелчок по любой кнопке изменит значение этого флага и перейдет в директиву. Директива будет загружать различные шаблоны соответственно.

Поделиться
0

Смотрите, я обновил вашу скрипку

Используйте attr в функции ссылок. потому что вы уже дали атрибут вашему html, то есть: modal-id = "{{pctrl.modalId}}

 <modal-directive ctrl="pctrl" modal-id="{{pctrl.modalId}}"></modal-directive>


  if(attrs.modalId == 'protocolModal'){
     element.find('#{{modalId}}').append('<div>this is a protocol test...</div>');
  } else {
     element.find('#{{modalId}}').append('<div>this is a category test...</div>');
  }

Редактировать :

использовать $ timeout

$timeout(function () {

                if (attrs.modalId == 'protocolModal') {
                    element.find('#' + attrs.modalId).append('<div>this is a protocol test...</div>');
                } else {
                    element.find('#' + attrs.modalId).append('<div>this is a category test...</div>');
                }

            }, 1000)

Теперь почему $ timeout, потому что вы применяете шаблон, и в то же время ваша функция ссылок добавляет ваш div, поэтому он не будет применять ваш div. Сначала примените шаблон, а затем в шаблоне добавьте div

И если вы хотите показать, что div во всплывающем содержимом, используйте этот селектор. см. этот пример: https://jsfiddle.net/kevalbhatt18/o76hxj69/6/

element.find('#'+attrs.modalId +' .modal-body').append('<div>this is a protocol test...</div>');

Поделиться
  • 0
    Это все еще не работает ..
  • 0
    @ Nilzone - ты проверил скрипку? jsfiddle.net/kevalbhatt18/o76hxj69/3
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню