Hi, I encountered a problem while I was developing a global button bar just
like a Microsoft ribbon. The idea is, that this button bar has certain base
functions, like add/delete/update. But the logic should be adapted to the
current site or item. Thus, I need to change the controller of the
directive.
I solved that problem basically with a factory, which stores the current
controller name and the directive observes that field.
var ButtonBarControlDirective = function ($rootScope, ButtonBarFactory,
$controller) {
return {
restrict: 'E',
scope: {},
templateUrl: "app/views/buttonbars/bar.html",
controllerAs: "barController",
transclude: true,
controller: function ($scope, $element, $transclude) {
var ctrl;
var self = this;
$scope.$watch(
function () { return ButtonBarFactory.controllerName; },
function handleChange(newValue, oldValue) {
if (newValue) {
refresh(newValue);
}
}
);
self.ctrl = {};
var refresh = function (controllerName) {
if (ctrl) {
ctrl.$destroy();
ctrl = null;
}
// The bar controller will be injected and the methods
(crud) and properties will be conntected
// to the directive controller in order to make them
available for the template.
// The controllers should implement an interface for the
required fields and methods.
ctrl = $rootScope.$new();
$controller(controllerName, { $scope: ctrl });
self.ctrl = ctrl;
}
}
}
}
var ButtonBarFactory = function ($rootScope) {
var buttonBarFac = {};
buttonBarFac.controllerName = "";
buttonBarFac.updateController = function (newController) {
buttonBarFac.controllerName = newController;
$rootScope.$digest();
}
return buttonBarFac;
};
The controller is saved in a field and the directive template can access
the methods of that injected controller.
This works great, but it is a bit ugly. All the dynamic injected controller
needs to implement certain methods and JavaScript does not support
interfaces unfortunately. Does anyone have a better/nicer solution which
can solve my problem?
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
