Accessing parent directive scope - angularjs

Question

So, I am trying to have 2 directives (techincally 3) on one page, which looks like this:
<div kd-alert newsletter></div>
<div kd-alert cookie></div>
this is on the index page, so there are no controllers.
I have been playing around with isolating scopes with directives and I have found that even though within the link function, scopes are isolated, if your directives use controllers the templates can see both controllers and if both controllers have a property with the same name they can be overwritten by the other controller, which is a nightmare so I decided to create a parent directive with one controller that serves the other 2 directives.
The parent directive in this case is called kd-alert and looks like this:
.directive('kdAlert', function () {
return {
restrict: 'A',
controller: 'AlertController',
link: function (scope, element, attr, controller) {
// Have to use a watch because of issues with other directives
scope.$watch(function () {
// Watch the dismiss
return controller.dismiss;
// If the value changes
}, function (dismiss) {
// If our value is false
if (dismiss === false || dismiss === 'false') {
// Remove the class from the element
element.removeClass('ng-hide');
// Else, if the value is true (or anything else)
} else {
// Add the class to the element
element.addClass('ng-hide');
}
});
// Get our buttons
var buttons = element.find('button');
// Binds our close button
scope.bindCloseButton = function (cookieName) {
// If we have a button
for (var i = 0; i < buttons.length; i++) {
// Get our current button
var button = angular.element(buttons[i]);
// If our button is the close button
if (button.hasClass('close')) {
// If the button is clicked
button.on('click', function (e) {
console.log('clicked');
// Prevent any default actions
e.preventDefault();
// dismiss the alert
controller.dismissAlert(cookieName);
// Remove our element
element.remove();
});
}
}
};
}
};
})
The controller handles methods for both child directives but is still pretty thin. It looks like this:
.controller('AlertController', ['$cookies', 'SubscriberService', 'toastr', function ($cookies, subscriverService, toastr) {
var self = this;
// Set our dismiss to false
self.dismiss = false;
// Set the flag
self.getDismissValue = function (cookieName) {
// Set our cookie
self.dismiss = $cookies[cookieName] || false;
};
// Set the flag
self.dismissAlert = function (cookieName) {
// Set our cookie
self.dismiss = $cookies[cookieName] = true;
};
// Saves our email address
self.subscribe = function (email, cookieName) {
// Subscribe
subscriverService.subscribe(email).success(function () {
// If we succeed, display a message
toastr.success('You will now recieve occasional newsletters.');
// Dismiss the alert
self.dismissAlert(cookieName);
});
};
}])
Now I have a cookie directive which works fine...
.directive('cookie', function () {
return {
restrict: 'A',
require: '^kdAlert',
templateUrl: '/assets/tpl/directives/cookie.html',
link: function (scope, element, attr, controller) {
console.log(scope);
// Get our cookie name
var cookieName = 'cookieAlert';
// Get our dismiss value
controller.getDismissValue(cookieName);
// Bind our close button
scope.bindCloseButton(cookieName);
}
};
})
When I refresh my page I can clearly see the scope with the bindCloseButton method within that scope. So far so good.
The problem is with the newsletter directive, it looks like this:
.directive('newsletter', function () {
return {
restrict: 'A',
require: '^kdAlert',
templateUrl: '/assets/tpl/directives/newsletter.html',
link: function (scope, element, attr, controller) {
console.log(scope);
// Get our cookie name
var cookieName = 'newsletterAlert';
// Get our dismiss value
controller.getDismissValue(cookieName);
// Bind our close button
scope.bindCloseButton(cookieName);
// Saves our email address
scope.subscribe = function (valid) {
// If we are not valid
if (!valid) {
// Return from the function
return;
}
// Subscribe
controller.subscribe(scope.email, cookieName);
};
}
};
})
Again, if I refresh the page I can clearly see the bindCloseButton method within that scope, but for some reason I get this error:
scope.bindCloseButton is not a function
And that appears on the line within the newsletter directive.
If I remove the cookie directive off the page, I still get the error.
Can anyone explain why?

Answer 1

use controller.bindCloseButton instead of scope.bindCloseButton .
This is happening because of the isolation of scope. you are doing in this approach and that's why you are losing scopes here.