在另一个指令中使用 AngularJS 指令传递布尔值

Question

我希望有人能帮助我 :) 我是 angular 指令世界的新手所以我尝试做一些简单的事情我在 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 我认为这是因为它是一个布尔值

这是我的标题指令

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) {}

最后是我标题的 templateUrl

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

你知道我想做什么只是如果我的右边部分是假的我不显示它并且我的标题指令已经有这部分它在任何地方都是相同类型的标题所以我想要像 React

一样在组件内部做一个组件

我确定这很简单，但我不知道为什么其他范围变量文本虽然通过但不是简单的 true false

感谢大家的帮助:)

Answer 1

je sub-title and ico one work perfectly but not the section-right one I think it's because it's a boolean

不要对双向绑定使用插值：

<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" 为真。

在另一个指令中使用 AngularJS 指令传递布尔值

Passing Booleans with AngularJS Directive inside other one

directive

parameter-passing

angularjs

angularjs-directive