Pass parameter and ng-click to the angular directive

Question

I want to pass some data from HTML to the directive, also this directive should be clickable by ng-click. Question is how i can pass parameter of link function to the template?

 app.directive("hello", function(){ return { restrict: "E", template : '<button ng-click="updateModel()">'+attrs.name+'</button>', scope : {}, link : function(scope, element, attrs, ctrl){ scope.updateModel = function(){ console.log("yay"); } } }; }); 

Here is HTML directive: <hello name="john"></hello>

Answer 1

Try this method

JS

app.directive("hello", function(){
      return {
        restrict: "E",
        template : '<button  ng-click="updateModel()" >{{name}}</button>',
        scope : {
            name :"@",
            user :"="
        },
        link : function(scope, element, attrs, ctrl){
          scope.updateModel = function(){
            console.log(scope.name, scope.user);
          }
        }
      };
    });

HTML

<hello name="jimbrooism" user="user"></hello>

1. = is two-way binding
2. @ simply reads the value (one-way binding)
3. & is used to bind functions

Answer 2

look:

app.directive("hello", function(){
  return {
    restrict: "E",
    template : '<button  ng-click="updateModel()">{{name}}</button>',
    scope : {
      name: "@"
    },
    link : function(scope, element, attrs, ctrl){
      scope.updateModel = function(){
        console.log("yay");
      }
    }
  };
});

Plunker: http://plnkr.co/edit/da8eHrxaxZsZm731b0Uk