директива неправильно отображает шаблон в AngularJS Bootstrap - PullRequest
Новая
       20

директива неправильно отображает шаблон в AngularJS Bootstrap

1 голос
/ 01 мая 2020

Я использую пользовательскую директиву для динамического создания двух столбцов подряд. Используя только Bootstrap, я могу получить дизайн, который мне нужен, это видно ниже с кодом html.

It works

HTML : 

<div class="col-md-6 border border-dark d-none d-md-block">
    <div class="row">
        <div class="col-md-6">
            <img class="img-fluid" src="pics/apple.png" />
        </div>
        <div class="col-md-6 align-self-center">
            <ul>
                <li>Name:APPLE</li>
                <li>Dimensions:THIS ONE</li>
            </ul>
        </div>
    </div>
</div>

Теперь, когда я использую пользовательскую директиву с шаблоном, имеющим такую ​​же точную структуру HTML, она выглядит следующим образом: It does not work anymore using directives

HTML: 

<features pics="pics/apple.png" name="Iphone" dimensions="One"></features>

AngularJS: 

app.directive('features',function(){
    var direc={};
    var link=function(scope,element,attributes){
        scope.pics=attributes["pics"];
        scope.name=attributes["name"];
        scope.dimensions=attributes["dimensions"];
    }
    direc.restrict="AE";
    direc.link=link;
    direc.template='<div class="col-md-6 border border-dark d-none d-md-block"><div class="row"><div class="col-md-6"><img class="img-fluid" src="{{pics}}" /></div><div class="col-md-6 align-self-center"><ul><li>Name:{{name}}</li><li>Dimensions:{{dimensions}}</li></ul></div></div></div>';
    direc.scope={};
    return direc;
})

Есть идеи, почему это так? Спасибо за чтение.

1 Ответ

0 голосов
/ 01 мая 2020

Разница между исходным шаблоном Bootstrap и директивой features заключается в том, что шаблон директивы окружен тегом <features>.

Я думаю, у тега есть атрибуты CSS, которые делают его выглядит по-другому.

В приведенном ниже примере я добавил стиль display: inline-block во второй тег функции и получаю тот же рендеринг, что и у вас.

Другая возможность заключается в том, что стили CSS компонента наследуются из родительского компонента, например, Bootstrap столбец

Вот пример кода, чтобы проиллюстрировать этот

Внимание:
Запустите фрагмент и нажмите кнопку Полная страница ссылка в правом верхнем углу или вы не увидите изображения 

(function () {
    'use strict';

    angular.module('app', []);

    angular
        .module('app')
        .directive('features', function () {
            return {
                restrict: 'AE',
                scope: {},
                template: '<div class="col-md-6 border border-dark d-none d-md-block"><div class="row"><div class="col-md-6"><img class="img-fluid" src="{{pics}}" /></div><div class="col-md-6 align-self-center"><ul><li>Name:{{name}}</li><li>Dimensions:{{dimensions}}</li></ul></div></div></div>',
                link: link
            };

            function link(scope, element, attributes) {

                scope.$on('$destroy', function () {
                    // destroy events binded to $rootScope, 
                    // cancel $interval and $timeout timers
                });

                scope.pics = attributes["pics"];
                scope.name = attributes["name"];
                scope.dimensions = attributes["dimensions"];
            }
        });

    angular
        .module('app')
        .filter('excludedItemsFilter', function () {
            return function (items, excludedStatus) {
                excludedStatus = excludedStatus || 'disabled'; // default value
                return items.filter(function (item) {
                    return item
                        && item.status !== excludedStatus;
                });
            }
        });

})();
.my-features {
  display: inline-block;
}
image
...