This should work:
<button-bar button-bar-controller="ButtonBarController"></button-bar>
.directive('buttonBar',['$compile',function($compile){
return {
restrict: 'E',
transclude: true,
scope: {},
templateUrl: 'ButtonBar.html',
controller: '@',
name: 'buttonBarController'
};
}]);
There is sample jsfiddle as well:
http://jsfiddle.net/p6Hb4/
Hope it works :)
On Thursday, November 19, 2015 at 4:31:27 AM UTC-5, Dennis Meyer wrote:
>
> 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 themavailable
> 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.
