Я надеюсь, что кто-то может мне помочь :) Я немного новичок в мире угловых директив, поэтому я стараюсь сделать что-то просто. У меня есть директива внутри другой директивы, аналогичной в Reactjs. Я бы хотел пройти хотя бы мою ценность в директиве внутри
это моя часть статьи html templateUrl для статьи Директива
<div my-title-directive
title = "Article News"
sub-title = {{subTitle}}
title-light = true
sub-title-hidden = true
section-right = {{section}}
ico = {{ico}}
ico-title-hidden = false>
</div>
<p class="anp">{{section}} - {{article}}</p>
je sub-title
и ico
одна работа отлично, но не section-right
я думаю, потому что это логическое
это моя директива title
function myTitleDirective() {
return {
restrict: 'EA', //E = element, A = attribute, C = class, M = comment
scope: {
//@ reads the attribute value, = provides two-way binding, & works with functions
title : '@',
titleLight : '=',
subTitle : '@',
subTitleHidden : '=',
sectionRight : '=',
ico : '@',
icoTitleHidden : '='
},
templateUrl: 'partials/_title.html',
//controller: CategoryCtrl, //Embed a custom controller in the directive
link: function (scope, element, attrs) { } //DOM manipulation
}
};
и моя директива по статье
function myArticleDirective (){
return {
transclude: true,
restrict: 'EA', //E = element, A = attribute, C = class, M = comment
scope: {
//@ reads the attribute value, = provides two-way binding, & works with functions
title : '@',
ico : '@',
section : '=',
subTitle : '@',
article : '@'
},
templateUrl: 'partials/_article.html',
//controller: CategoryCtrl, //Embed a custom controller in the directive
link: function (scope, element, attrs) {}
и, наконец, мой шаблонUrl для моего названия
<div class="mainTitle">
<h4 class='titleInnerSection ng-class:{ "titleLight" : !titleLight }'>{{title}} <span class='subTitleInnerSection ng-class:{ "hidden" : subTitleHidden }'>{{subTitle}}</span></h4>
</div>
<div class='categoryInnerSection ng-class:{ "hidden" : !sectionRight }'>
<div class='icoInnerSection {{"ico" + subTitle}} '><svg><use xlink:href='{{ico}}'/></svg></div>
<div class='catTitle ng-class:{ "hidden" : icoTitleHidden }'>{{subTitle}}</div>
</div>
вы видите, что я хотел бы сделать это, только если моя правая часть находится под ложью. Я не показываю ее, и моя директива title уже имеет эту часть, она имеет одинаковый заголовок везде, поэтому для этого я хотел бы сделать компонент внутри компонент, как в реактиве
Я уверен, что это просто, но я не знаю, почему другой переменный переменный текст проходит, но не просто true false
спасибо, ребята, за вашу помощь :)
je
sub-title
иico
одна работа отлично, но неsection-right
я думаю, потому что это логическое
Не используйте интерполяцию с двунаправленной привязкой:
<div my-title-directive
title = "Article News"
sub-title = {{subTitle}}
title-light = true
sub-title-hidden = true
<!-- DONT use interpolation
section-right = {{section}}
-->
<!-- INSTEAD use Angular Expression -->
section-right = "section"
ico = {{ico}}
ico-title-hidden = false>
</div>
<p class="anp">{{section}} - {{article}}</p>
my-title-directive
использует двунаправленную привязку для атрибута section-right
:
function myTitleDirective() {
return {
restrict: 'EA', //E = element, A = attribute, C = class, M = comment
scope: {
//@ reads the attribute value, = provides two-way binding, & works with functions
title : '@',
titleLight : '=',
subTitle : '@',
subTitleHidden : '=',
sectionRight : '=', // <<<<See bidirectional binding
ico : '@',
icoTitleHidden : '='
},
templateUrl: 'partials/_title.html',
//controller: CategoryCtrl, //Embed a custom controller in the directive
link: function (scope, element, attrs) { } //DOM manipulation
}
};
Интерполяция {{section}}
преобразует выражения в строку. Логическое false
становится строкой "false". В JavaScript строка "false" является правдой.