I'm having trouble passing an object from the current scope to a directive that I added using the $compile service.
While I can successfully pass a string to the child directive, I'm unable to pass the actual object.
Take a look at this fiddle for the scenario : http://jsfiddle.net/ewx2trvx/2/
HTML:
<section ng-app="myApp" ng-controller="MainCtrl">
<addbuttonsbutton></addbuttonsbutton>
<div id="space-for-buttons"></div>
</section>
JS:
var myApp = angular.module('myApp', []);
function MainCtrl($scope) {
$scope.count = 0;
}
myApp.directive("addbuttonsbutton", function () {
return {
restrict: "E",
template: "<button addbuttons>Click to add buttons</button>"
}
});
//Directive for adding buttons on click that show an alert on click
myApp.directive("addbuttons", function ($compile) {
return function (scope, element, attrs) {
element.bind("click", function () {
scope.count++;
angular.element(document.getElementById('space-for-buttons'))
.append($compile("<alert alert='count'></alert>")(scope));
});
};
});
//Directive for showing an alert on click
myApp.directive("alert", function () {
return {
template: "<div><button class='btn btn-default'>Show alert # {{count}}</button></div>",
scope: {
a: '@alert'
},
replace:true,
link: function (scope, element, attrs) {
element.bind("click", function () {
console.log(scope.a);
alert("This is alert #" + scope.a);
});
}
};
});
Any insights or suggestions?
Thank you.