CODEWITHSUNDEEP
angularjsionic-frameworkangularjs-directive
Michael Maurel
Michael Maurel

Reputation: 97

Why doesn't my directive recognize its parameters?

I'm reviewing old classes and I try to finish the exercices I couldn't do before. This class is in Ionic1, using Angular1.

I have a directive using two parameters; the first one is an object which data are to be displayed, and the second one is a parameter to hide/show some elements in the display

Here is the view implementing the controller :

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

And here is the directive construction :

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

All the files are correctly referenced. My directive is displayed in the view, but the "displayBtnAddFav" value isn't interpreted correctly. The "DISPLAY WHEN TRUE"

is always displayed

I tried :

Nothing works as intended and I seem to be out of options. Would any of you see what I'm doing wrong?

Upvotes: 0

Views: 30

Answers (2)

Michael Maurel
Michael Maurel

Reputation: 97

Thanks a lot Kyle for your input.

After some more tests, it appears you're right despite what the doc was telling me. Another crucial point I realized it that the directive doesn't like "camelCase" arguments : I had to change the displayBtnAddFav to displaybtnaddfav for it to work properly.

Upvotes: 0

Kyle Mills
Kyle Mills

Reputation: 373

So I think the issue here is the scope binding:

Per the angular documentation: & bindings are ideal for binding callback functions to directive behaviors. (https://docs.angularjs.org/guide/directive)

Different bindings are ideal for different scenarios. Try changing it from a & to an =. This should allow for angular to interpret the boolean your trying to pass correctly. 

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

Upvotes: 1

Related Questions