Repeating a div on button press in AngularJS - angularjs

Question

I am following a tutorial here: https://fourtonfish.com/blog/2014-01-dynamically-add-directives-in-angularjs-no-jquery/
to try and append information to a div when a button is pressed. I have got the button added to my home page, however when I click it I receive:
angular.js:14324 TypeError: element.bind is not a function
I'd love some advice on how to correct this, and potentially even a better approach if there is one. I feel like using element.bind is a jquery approach and there is probably a nicer way to do this with Angular?
main.html
<div id ="fullForm" ng-controller="MainCtrl" >
<button-add></button-add>
<div id="test">test</div>
</div>
main.js
'use strict';
/**
* #ngdoc function
* #name jsongeneratorApp.controller:MainCtrl
* #description
* # MainCtrl
* Controller of the jsongeneratorApp
*/
angular.module('jsongeneratorApp')
.controller('MainCtrl', function ($scope) {
.directive('buttonAdd',function(){
return{
restrict:'E',
templateUrl:'scripts/directives/addbutton.html'
}
})
.directive('addfields',function($compile){
console.log("directive called.");
return function(element,attrs){
element.bind("click",function(){
angular.element(document.getElementById('test')).append($compile("<div>Test</div>"))
})
}
})
addbutton.html
<div class="row rowmargin">
<div class="col-sm-9">
</div>
<div class="col-sm-3">
<button addfields class="btn"> Add New Variable</button>
</div>
</div>

Answer 1

Element is the second parameter, not the first one. The first one is the $scope object of the directive.
It might be possible that you were confused with the dependency injection of angular, but the link function of a directive doesn't work with dependency injection.
If you add the scope parameter in the signature it will work:
// You missed the first parameter 'scope'
return function(scope, element, attrs){
element.on("click",function(){
$compile("<div>Test</div>")(scope, function(compiled){
// callback
angular.element(document.getElementById('test')).append(compiled);
});
});
}
Please also note that the bind function is deprecated, so you should use on instead.