Question

我希望有人能帮助我:)我在角度指令世界中是一个小新手，所以我尝试做一些简单的事情我在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

我确信它很简单，但我不知道为什么其他范围变量文本传递但不是简单的真假

感谢你们的帮助：）

Answer 1

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成为字符串＆＃34; false＆＃34;。在JavaScript中，字符串＆＃34; false＆＃34;是真的。

在其他人中使用AngularJS指令传递布尔值

1 个答案: