AngularJS - Passing Scope between directives - angularjs

Question

In the interest of abstraction, I'm trying to pass a scope between directives with little success... Basically, this is a modal type scenario:
Directive A - handles click function of on screen element:
.directive('myElement', ['pane', function(pane){
return {
restrict: 'A',
scope: {},
link: function(scope,elem,attrs){
//im going to try and call the form.cancel function from a template compiled in another directive
scope.form = {
cancel: function(){
pane.close();
}
};
scope.$watch(function(){
var w = elem.parent()[0].clientWidth;
elem.css('height',(w*5)/4+'px');
});
elem.on('click', function(){
//this calls my service which communicates with my other directive to 1) display the pane, and 2) pass a template compiled with this directive's scope
pane.open({
templateUrl: 'views/forms/edit.html',
scope: scope //I pass the scope to the service API here
});
});
}
}
}])
I have a service called 'Pane' to handle the API:
.service('pane',['$rootScope', function($rootScope){
var open = function(data){
$rootScope.$broadcast('openPane',data); //this broadcasts my call to open the pane with the template url and the scope object
};
var close = function(){
$rootScope.$broadcast('closePane');
};
return {
open: open,
close: close
}
}]);
Finally, directive B is lying in wait for the 'openPane' broadcast which includes the template url and the scope:
.directive('pane',['$compile','$templateRequest','$rootScope', function($compile,$templateRequest,$rootScope){
return {
restrict: 'A',
link: function(scope,elem,attrs){
var t;
scope.$on('openPane', function(e,data){ //broadcast is received and pane is displayed with template that gets retrieved
if(data.templateUrl){
$templateRequest(data.templateUrl).then(function(template){
//this is where the problem seems to be. it works just fine, and the data.scope object does include my form object, but calling it from the template that opens does nothing
t = $compile(template)(data.scope);
elem.addClass('open');
elem.append(t);
}, function(err){
console.log(JSON.stringify(err));
});
}
else if(data.template){
t = $compile(angular.element(data.template))(data.scope);
elem.addClass('open');
elem.append(t);
}
else console.log("Can't open pane. No templateUrl or template was specified.")
});
scope.$on('closePane', function(e,data){
elem.removeClass('open');
t.remove();
});
}
}
}])
The problem is that when the last directive, 'pane', receives the 'openPane' broadcast, it opens and appends the template just fine, but when i call the function 'form.cancel()' defined in my original directive like so:
<button type="button" ng-click="form.cancel()">Cancel</button>
... nothing happens. Truth is, I'm not sure what I'm doing is legit at all, but i want to understand why it isn't working. The ultimate goal here is to be able to pass the scope of one directive, along with a form template, to the Pane directive, so all my forms (which are controlled by their own directives) can be 'injected' into the pane.

Answer 1

Without a running example I'm suspecting the likely cause to be the scope of your scope when passed to your pane template. The scope itself does get passed and used when you compile your pane template, but its closure is lost along the way, so you likely can't see pane service which is part of the directive factory closure and form.cancel uses.
I've written a simplified example that does work and doesn't rely on closures bt rather on local variables. You could accomplish a similar thing if you called .bind(pane) on your scope.form.cancel function and within replace pane by this.
So here's a working example and this is its code:
/* ************ */
/* Pane service */
class PaneService {
constructor($rootScope) {
console.log('pane service instantiated.', this);
this.$rootScope = $rootScope;
}
open(template, scope) {
this.$rootScope.$emit('OpenPane', template, scope);
}
close(message) {
this.$rootScope.$emit('ClosePane', message);
}
}
PaneService.$inject = ['$rootScope'];
/* ************************* */
/* Pane directive controller */
class PaneController {
constructor($rootScope, $compile, $element) {
console.log('pane directive instantiated.', this);
this.$compile = $compile;
this.$element = $element;
$rootScope.$on('OpenPane', this.open.bind(this));
$rootScope.$on('ClosePane', this.close.bind(this));
}
open(event, template, scope) {
console.log('pane directive opening', template, scope);
var t = this.$compile(template)(scope);
this.$element.empty().append(t);
}
close(evet, message) {
console.log('pane directive closing', message);
this.$element.empty().append('<strong>' + message + '</strong>');
}
}
PaneController.$inject = ['$rootScope', '$compile', '$element'];
var PaneDirective = {
restrict: 'A',
controller: PaneController,
controllerAs: 'pane',
bindToController: true
}
/* *************** */
/* Page controller */
class PageController {
constructor(paneService, $scope) {
console.log('page controller instantiated.', this);
this.paneService = paneService;
this.$scope = $scope;
}
open() {
console.log('page controller open', this);
this.paneService.open('<button ng-click="page.close(\'Closed from pane\')">Close from pane</button>', this.$scope);
}
close(message) {
console.log('page controller close');
this.paneService.close(message);
}
}
PageController.$inject = ['paneService', '$scope'];
angular
.module('App', [])
.service('paneService', PaneService)
.directive('pane', () => PaneDirective)
.controller('PageController', PageController);
And page template is very simple:
<body ng-app="App">
<h1>Hello Plunker!</h1>
<div ng-controller="PageController as page">
<button ng-click="page.open()">Open pane</button>
<button ng-click="page.close('Closed from page')">Close pane</button>
</div>
<div pane></div>
</body>