The missing Link

We will start with the bare minimum needed for satisfying our directive. The most often used part of a directive is its link function. Inside the link function, by default, we have access to the scope, element, and the attributes as parameters. We can register the directive on the module we have defined in the previous step.

app . directive ( "btnCheckbox" , function (){ return function ( scope , element , attr ){ console . log ( scope , element , attr ); element . bind ( "click" , function (){ console . log ( "Need to change the model value but dont know how to yet" ); }) } });

If we refresh the browser now, we can see that we have access to the scope, element, and attributes. We have also used the link function to bind a click method on the element so that whenever we have clicked an element it will output a message to the console.

Next we need to have access the ngModelController so that we can read and set the model data associated with the element. In this case our link function should be injected with the ngModelController and for that to happen our directive should return a Directive Definition Object rather than a simple link function.