Hyperlinks in the Dialog

[vrcrush]

hi, my dialog contains hyperlinks, but when it renders in the chatbot window it shows the HTML code. any suggestions to fix this? thank you!

[abnerfcastro]

Hi @vrcrush ,

My suggestion is to use the ngBingHtml Angular directive. It's currently only binding the text message content (see on public/views/home.view.html file). I think this directive will render the message in HTML.

[vrcrush]

Thank you Abner. I am reading about the bingHTML Angular directive. Do you think this is easy enough task for somebody that has zero Angular experience?

any good resource to read about it?

your chatbot code solves the problem I had with mine (the scrolling), but i am having issues with the html code render.

thanks!

Pablo

---

De: Abner Castro notifications@github.com Enviado: viernes, 24 de agosto de 2018 11:46 a. m. Para: abnerfcastro/watson-chatbot-boilerplate CC: vrcrush; Mention Asunto: Re: [abnerfcastro/watson-chatbot-boilerplate] Hyperlinks in the Dialog (#3)

Hi @vrcrushhttps://github.com/vrcrush ,

My suggestion is to use the ngBingHtml https://docs.angularjs.org/api/ng/directive/ngBindHtml Angular directive. It's currently only binding the text message content (see on public/views/home.view.html file). I think this directive will render the message in HTML.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/abnerfcastro/watson-chatbot-boilerplate/issues/3#issuecomment-415816142, or mute the threadhttps://github.com/notifications/unsubscribe-auth/Ahw4ffqEwoIQzONwRgo1K03AyJyM40DAks5uUC3ygaJpZM4WLoO4.

[abnerfcastro]

@vrcrush ,

I've never used it myself, but I just did a quick research and it's actually quite easy to implement. As it is very unsafe to allow HTML injection in your code, Angular JS provides a module called ngSanitize (you can read more about it here). To use this module, you need to first include it in the public/index.html file. You might want to add the following snippet below this line:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-sanitize.min.js"></script>

After including it, you will have to add ngSanitize to the list of modules your Angular application depends on. You can that on public/js/app.js file:

    angular.module('chatbot.app', [
        'ngRoute',
        'chatbot.app.services',
        'luegg.directives',
        'ngSanitize'
    ]);

Now you can safely use ngBindHtml. To do that, change this p tag to

<div ng-bind-html="message.content"></div>

You can learn more on these links: How to use ng-bing-html? How To Use NG-Bind-html in Angular JS? (YouTube video)

I hope that helps.

Regards,

Abner

[vrcrush]

thank you so much!

that made the trick!

---

De: Abner Castro notifications@github.com Enviado: viernes, 24 de agosto de 2018 07:39 p. m. Para: abnerfcastro/watson-chatbot-boilerplate CC: vrcrush; Mention Asunto: Re: [abnerfcastro/watson-chatbot-boilerplate] Hyperlinks in the Dialog (#3)

@vrcrushhttps://github.com/vrcrush ,

I've never used it myself, but I just did a quick research and it's actually quite easy to implement. As it is quite unsafe to allow HTML injection in your code, Angular JS provides a module called ngSanitize (you can read more about it herehttps://stackoverflow.com/questions/33209938/what-is-the-purpose-of-angular-sanitize). To use this module, you need to first include it in the public/index.html filehttps://github.com/abnerfcastro/watson-chatbot-boilerplate/blob/f2a4aa4147a3c9bc922fbbf47fe8e5db2c340f13/public/index.html#L62. You might want to add the following snipped below this linehttps://github.com/abnerfcastro/watson-chatbot-boilerplate/blob/f2a4aa4147a3c9bc922fbbf47fe8e5db2c340f13/public/index.html#L61:

After including it, you will have to add ngSanitize to the list of modules your Angular application depends on. You can that on public/js/app.js filehttps://github.com/abnerfcastro/watson-chatbot-boilerplate/blob/master/public/js/app.js:

angular.module('chatbot.app', [
    'ngRoute',
    'chatbot.app.services',
    'luegg.directives',
    'ngSanitize'
]);

Now you can safely use ngBindHtml. To do that, change thishttps://github.com/abnerfcastro/watson-chatbot-boilerplate/blob/f2a4aa4147a3c9bc922fbbf47fe8e5db2c340f13/public/views/home.view.html#L40 p tag to

You can learn more on these links: How to use ng-bing-html?https://stackoverflow.com/questions/27464446/how-to-use-ng-bind-html How To Use NG-Bind-html in Angular JS?https://www.youtube.com/watch?v=eYa7E7iW8-8 (YouTube video)

I hope that helps.

Regards,

Abner

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/abnerfcastro/watson-chatbot-boilerplate/issues/3#issuecomment-415915915, or mute the threadhttps://github.com/notifications/unsubscribe-auth/Ahw4fU98TKQMp6Cadi0fX75gwwC_uxU4ks5uUJzRgaJpZM4WLoO4.

[abnerfcastro]

Glad a I could help 👍