Angular create directive with Service

Question

I want to create a new element within a service, compile it and append it to the body (a message box). My question is if and how it's possible to create a new element in a service and append it to the DOM and if there's a better way to do it maybe (it should be in a service tho).

My problem is that I can't bind attributes to the directive's scope:

I got the following code:

Method to create new element in my service

_createMessageBox = function (text, buttons) {
    var msgBox = document.createElement('message-box');
    msgBox.setAttribute('class', 'messageBox');
    msgBox.setAttribute('text', text);
    msgBox.setAttribute('buttons', buttons);
    $compile(msgBox)(scope);
    $('body').append(msgBox);               
};

Use of the service

var buttons = ['Eins', 'Zwei'];
mbs.createMessageBox('Nachricht', buttons);

directive

app.directive('messageBox', function () {
    link = function (scope, element, attrs) {
        scope.buttonClicked = function(id) {
            this.$emit('button'+id+'_clicked');
        }
    }

    return {
        restrict: 'E',
        scope:
        {
            text: '=',
            buttons: '='
        },
        link: link
        };
});

When I do it that way I get this error and the attributes aren't binded

Error: [$parse:syntax] Syntax Error: Token ',' is an unexpected token at column 5 of the expression [Eins,Zwei] starting at [,Zwei].

why do you want it in service? is it because you want it accessible across all your controllers? i see you are creating a directive element and then appending html elements to it like text and button what are you trying to achieve pls elaborate — Rishul Matta
– Rishul Matta, Commented Mar 12, 2014 at 9:07
Yes I want a service because of the accessibility. A controller should be able to inject the service and then create a message box in certain use cases by using the method createMessageBox. I'm not that deep in angular but I hope the approach is okay — John Smith
– John Smith, Commented Mar 12, 2014 at 9:09

Rishul Matta · Accepted Answer · 2014-03-12 09:34:02Z

1

You have dependency on a directive and service so you should be using a provider not a service for this refer http://docs.angularjs.org/guide/providers

secondly your directive has an isolated scope so even if you perform events at a controller level you wont be able to respond from the directive as per your requirements in the comments section i would advise you to use $modal service in http://angular-ui.github.io/bootstrap/

answered Mar 12, 2014 at 9:34

Rishul Matta

3,5035 gold badges26 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

John Smith · Accepted Answer · 2014-03-12 09:39:36Z

I found the solution for my problem,

msgBox.setAttribute('text', text);
msgBox.setAttribute('buttons', buttons);

this was just setting the attribute as a constant string, the solution was to create the property for the scope I created the element with plus I had to hand a string as attribute, not a variable

This code is working:

_createMessageBox = function (text, buttons) {
    scope.text = text;
    scope.buttons = buttons;
    var msgBox = document.createElement('ext-message-box');
    msgBox.setAttribute('class', 'extMessageBox');
    msgBox.setAttribute('text', 'text');
    msgBox.setAttribute('buttons', 'buttons');
    $compile(msgBox)(scope);
    $('body').append(msgBox);               
};

Collectives™ on Stack Overflow

Angular create directive with Service

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related