добавить директиву html из другой директивы в angularJS

Question

добавить директиву html из другой директивы в angularJS

0

Когда я нажимаю кнопку, появляется модальная мода. В этом модальном я имею <template-placeholder></template-placeholder>

Когда кнопка нажата, я делаю if-check чтобы убедиться, что это правильная кнопка. Если это так, добавьте еще одну директиву вместо placeholder.

Но я не могу заставить его работать.

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

.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">',
                        '<template-placeholder></template-placeholder>',
                        '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>',
                        '</div>',
                        '</div>', 
                        '</div>',
                        '</div>'].join(''),
        link: function(scope, element, attrs) {
            scope.$watch('modalId', function(val){
                if(val == 'protocolModal'){
                    element.find('template-placeholder').replaceWith('<test-directive></test-directive>');
                }
            });
        }
    }
})

.directive('testDirective', function(){
    return {
        restrict: 'E', 
        template: '<div>this is our other directive speaking.</div>'
    }
});

Nilzone- 21 июль 2015, в 13:51

Источник

1

Почему бы вам не использовать использовать нг-если. Это упростит вещи.
Shaik Mahaboob Basha 21 июль 2015, в 11:19
0

Является ли <template-placeholder> директивой или просто фиктивным элементом?
Nikos Paraskevopoulos 21 июль 2015, в 11:24
0

вы заменяете контент без компиляции
nada 21 июль 2015, в 11:25
0

@NikosParaskevopoulos просто фиктивный элемент, который должен быть заменен директивой.
Nilzone- 21 июль 2015, в 11:25

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

Теги:

javascript

html

angularjs

angularjs-directive

3 ответа

1

Зачем смотреть на modalId? Вы можете просто использовать ng-if:

'<div class="modal-footer">',
'<test-directive data-ng-if="modalId == \'protocolModal\'"></test-directive>',
'<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>',
'</div>',

Вот скрипка с ней: http://jsfiddle.net/aL0er9rv/

Mathew Berg 21 июль 2015, в 09:08

0

Замените шаблон-заполнитель на

<ng-if="protocolModal" test-directive></test-directive>

ng - если вы позаботитесь о компиляции и уничтожении. Это очень приятно.

Nevy 21 июль 2015, в 08:45

Ещё вопросы

Почему бы вам не использовать использовать нг-если. Это упростит вещи.
Является ли <template-placeholder> директивой или просто фиктивным элементом?
вы заменяете контент без компиляции
@NikosParaskevopoulos просто фиктивный элемент, который должен быть заменен директивой.

Nikos Paraskevopoulos · Accepted Answer · 2015-07-21T09-19-00.000Z

Вам нужно использовать $compile:

.directive('modalDirective', ['$compile', function($compile){
    ...
    link: function(scope, element, attrs) {
        scope.$watch('modalId', function(val){
            if(val == 'protocolModal'){
                element.find('template-placeholder').replaceWith($compile('<test-directive></test-directive>')(scope));
            }
        });
    }
}])

Обновленная скрипка: https://jsfiddle.net/L0jns64m/3/