Passing parameter to isolated scope : Advance Beginner II

Hey friends! whats up? In this post I am going to explain how to pass parameter to directive in an isolated scope
Let me explain what I am going to do so that the implementation becomes more logical for you guys.
In current behaviour I am able to call these superheroes only once. What I want to do is call them as many times as I want to and when I call them It will hide all the user information and display only a message and a button to display user info.
So first we will define a variable infocard in our directive in script.js file. Then we will put some logic to either show or hide the info in displayInfo.html


Now lets review what I have done.
In script.js file I have defined a variable infocard with value true.Now whenever user click on button it will trigger callAvengers function and change the value of infocard.
In displayInfo.html in panel I have set ng-show="infocard".hence by default it will show panel will all the information and when infocard is false it will hide panel and show only a message and a button.Pretty easy right?
But suppose lots of people are using your directive and if they don't want to show user info by default?They have to dive into your directive source code and change things and I really don't like it when someone messes up with my code!So what is the solution?
We would give developer option to set value of infocard true or false from index.html itself.Basically we will pass a parameter to our directive from index.html
Just like we added user parameter in script.js refer here we can add infocard but unlike before here we are not adding data but a simple value paremeter. So we will change from "=" to "@"."@" limits ability to accept only string value.

angular.module('myApp').directive('displayInfo', function() {
  return {
    templateUrl: "displayInfo.html",
    restrict: "EA",
    scope: {
      user: '=',
      infocard:'@'
    },
    controller: function($scope) {
      $scope.callAvengers = function(user) {
        $scope.infocard=!$scope.infocard;
        user.message = "We will arrive soon buddy!"
      };
    }
  }
});

But can you notice one big problem here?we are accepting value of infocard as a string, so even if we set infocard value true inside scope of directive we will get string true and not boolean
We have a simple workaround here.We will accept the parameter with same name as specified in index.html but inside the scope of directive we will assign infocard to some other variable as follow

scope: {
      user: '=',
      userInfo:'@infocard'
    }

Now we can set infocard value to be boolean with following approach.

$scope.infocard = ($scope.showInfo === 'true');

Here is working example.

Tadaaa!!!Now call these guys day in day out!disturb them...call them till they hear you..what you are waiting for?Go!!!
We have seen two different kind of parameters in directive.Now lets see third type which is function.
Lets have a control of removing them from their team? No You don't want to do that? But I like being villain!
We will put cross beside every team.On clicking it we will ask confirmation and provide option to cancel.Lets look at the code.Try to understand what is happening. Now lets review the code.So basically I have created a new directive removeTeam which contains logic to remove team.For this directive I have used template removeTeam.html
There are two things to notice here:

• Inside displayInfo.htmlin displayInfo directive I am using method attribute and passing some function
• In script.js file, inside scope of removeTeam controller I am setting something as notifyRemove.

I am using method attribute inside removeTeam directive and passing a function.I have named it method, you can name it whatever you want.For simple value parameter we specify '@'.Similarly for function as parameter we specify '&'.So now when I click on cross it triggers confirmRemove function which in return calls notifyRemove.Since we have passed function as parameter using '&' it will automatically call remove function present inside userInfo directive.
By now you should be comfortable with directives.Next we will move to intermediate stage, where I will explain about decorator directives,link function and many more things further.
If you face any problem you can mail me at omitewary@gmail.com