Question

我正在复习旧课，我尝试完成以前无法做的练习。此类在Angular1中的Ionic1中。

我有一个使用两个参数的指令；第一个是要显示数据的对象，第二个是用于隐藏/显示显示器中某些元素的参数

这是实现控制器的视图：

<ion-list>
      <film-directive 
        ng-repeat="tmpMovie in myController.movieList" 
        movie="tmpMovie"
        displayBtnAddFav="false"
      ></film-directive>
</ion-list>

这是指令构造：

const FilmDir = function(){
    return {
        "restrict":"E",
        "scope":{
            "movie"              :"=",
            "displayBtnAddFav"   :"&"
        },
        "template":`
            <ion-item>  
                <p ng-if="displayBtnAddFav">DISPLAY WHEN TRUE</p>
                <p ng-if="!displayBtnAddFav">DISPLAY WHEN FALSE</p>
            </ion-item>`,
        "controller":function($scope){
            //TODO
        }
    }
};

所有文件均已正确引用。我的指令显示在视图中，但是“ displayBtnAddFav”值未正确解释。始终显示“ TRUE时显示”

我尝试过：

使用displayBtnAddFav =“ false”
使用displayBtnAddFav = false调用指令
使用字符串（“ a”或“ b”）替换布尔值，并使用ng-if =“ displayBtnAddFav ==='a'”

一切都没有按预期进行，我似乎没有选择余地。你们中有人会看到我在做什么吗？

Answer 1

所以我认为这里的问题是范围绑定：

根据角度文档：& bindings are ideal for binding callback functions to directive behaviors。（https://docs.angularjs.org/guide/directive）

不同的绑定是不同情况的理想选择。尝试将其从&更改为=。这应该允许角度解释您正确通过的布尔值。

const FilmDir = function(){
    return {
        "restrict":"E",
        "scope":{
            "movie"              :"=",
            "displayBtnAddFav"   :"="
        },
        "template":`
            <ion-item>  
                <p ng-if="displayBtnAddFav">DISPLAY WHEN TRUE</p>
                <p ng-if="!displayBtnAddFav">DISPLAY WHEN FALSE</p>
            </ion-item>`,
        "controller":function($scope){
            //TODO
        }
    }
};

Answer 2

非常感谢Kyle的投入。

经过更多测试后，尽管文档告诉了我，但看来你是对的。另一个关键点是，我意识到该指令不喜欢“ camelCase”参数：我必须将 displayBtnAddFav 更改为 displaybtnaddfav 才能正常工作。

为什么我的指令无法识别其参数？

2 个答案: