Create multiple instance of a simple alert

[teorossi82]

Dear Todd, i'm a js developer and i've a doubt about the right way to create a simple element in angularjs. My goal is to create a "component" (maybe are not the right word) that can show some simple message to the user (title and message) and have a button to close itself. And it will be possible to create multiple instance of the element that can be manage with a variable in an external controller. I try to explain better: 1 - i have an angular controller where i can instance the element like this: var instance = alert.open({"title":"Attention","message":"This is an alert"}); 2 - this method must create an html element that show the message. 3 - it must be possible to call instance.set("title","New title") to modify the title of the element created. In internet there are a lot of different method to do this, but its not convinced me:

• http://www.bennadel.com/blog/2806-creating-a-simple-modal-system-in-angularjs.htm
• http://plnkr.co/edit/tSg6HZq0IcWyB4elCff5?p=preview

I would be grateful if you could tell me what is , in your opinion , the best method to implement this functionality

[toddmotto]

Hey Matteo, so when teaching I don't just like to give people answers - what have you got so far, we can then discuss ways of doing things. Sling a jsfiddle/plunker in here :)

On 23 March 2016 at 08:38, Matteo Rossi [email protected] wrote:

Dear Todd, i'm a js developer and i've a doubt about the right way to create a simple element in angularjs. My goal is to create a "component" (maybe are not the right word) that can show some simple message to the user (title and message) and have a button to close itself. And it will be possible to create multiple instance of the element that can be manage with a variable in an external controller. I try to explain better: 1 - i have an angular controller where i can instance the element like this: var instance = alert.open({"title":"Attention","message":"This is an alert"}); 2 - this method must create an html element that show the message. 3 - it must be possible to call instance.set("title","New title") to modify the title of the element created. In internet there are a lot of different method to do this, but its not convinced me:

http://www.bennadel.com/blog/2806-creating-a-simple-modal-system-in-angularjs.htm

• http://plnkr.co/edit/tSg6HZq0IcWyB4elCff5?p=preview

I would be grateful if you could tell me what is , in your opinion , the best method to implement this functionality

— You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub https://github.com/toddmotto/ama/issues/25

@toddmotto

[teorossi82]

Hey Todd, thanks for your replay. At this link you can find my simple directive "mrFeedback": https://plnkr.co/edit/WTlHEYA7ItJcxERauAtt?p=preview

This directive permit to show simple box with a title, a message and a list of action button if necessary. The problem of this component is that is a directive and can be used only if it's added in html like a directive. My goal, instead, is to create this box dinamically, with a function inside a page's controller, like mrFeedback.open(options) (simil to ui-bootstrap modal to understand).

[toddmotto]

I think I would create the directive somewhere in the page, and then when you initialise the Directive, you also tell it what element to bind to, so you could move it wherever you need it to go.

[teorossi82]

I finally chose this solution: I have created a provider that exposes an "open" method. When a user calls the method, the provider puts the Directive in the DOM. I created a module on github that you can view at: https://github.com/teorossi82/mrFeedback