AngularJS : ng-bind-html inside a uib-tooltip-html - javascript

I have to show a tooltip in my UI. I am using angularjs in UI side.
Please see the code below.
<i class="fa fa-info-circle f18 darkgray hover pointer" uib-tooltip-html="'<div class=fw-600>Reason:</div>"+obj.comments+"'" tooltip-class="white-blue-tooltip"></i>
But I am getting error when the value of obj.comments = Canceled via 'View Group'. Please see the error below.
Error: [$parse:syntax] Syntax Error: Token 'View' is an unexpected token at column 49 of the expression ['<div class=fw-600>Reason:</div>cancelling via 'View Group''] starting at [View Group''].
This is because of the single quote present in the value (Canceled via 'View Group').
In order to solve this I have used ng-Sanitize as described in the following link
https://www.w3schools.com/angular/ng_ng-bind-html.asp
Now my code look like below
<i class="fa fa-info-circle f18 darkgray hover pointer" uib-tooltip-html="'<div class=fw-600>Reason:</div> ng-bind-html="+obj.comments+"'" tooltip-class="white-blue-tooltip"></i>
But I am getting output like
Reason:
ng-bind-html=Canceled via 'View Group'
I have added 'ngSanitize' in my controller and loaded the angular.min.js and angular-sanitize.js in the page, is there anything missing here.
Appreciates any help.

You have to use $sce service. Please look into following link.
Angularjs Sce

Related

Bootsrap class not getting rendered in vueJs thorugh v-bind

I am trying to render bootstrap class in vueJs though v-bind and it is giving me syntax error
SyntaxError: Unexpected token (16:282)
I have used this code to render my bootstrap class.
< span class="fa fa-fw field-icon" v-bind:class="{fa-eye:true, fa-eye-slash:false}"
style = "font-size: 20px;" #click="switchVisibility">
</span>
The rest of the logic is working fine. What syntax error have I made here?

Vuetify buttons in vue-social-sharing of nuxt application

I'm trying to implement this - https://github.com/nicolasbeauvais/vue-social-sharing in my nuxt (+vuetify) application.
I've created a file - vue-social-sharing.js in plugins folder:
import Vue from "vue";
import VueSocialSharing from "vue-social-sharing";
Vue.use(VueSocialSharing);
included them in nuxt.config.js
plugins: [
"#/plugins/vuetify",
"#/plugins/vue-social-sharing.js"
],
I'm trying to beautify the buttons with Vueity (this works fine - https://jsfiddle.net/menteora/evydLj65/1/)
<social-sharing url="https://vuejs.org/"
title="The Progressive JavaScript Framework"
description="Intuitive, Fast and Composable MVVM for building interactive interfaces."
quote="Vue is a progressive framework for building user interfaces."
hashtags="vuejs,javascript,framework"
twitter-user="vuejs"
inline-template>
<div>
<v-btn><network network="email">
<i class="fa fa-envelope"></i> Email
</network></v-btn>
<v-btn><network network="facebook">
<i class="fa fa-facebook"></i> Facebook
</network></v-btn>
</div>
</social-sharing>
But I'm running into the below errors:
[Vue warn]: The client-side rendered virtual DOM tree is not matching
server-rendered content. This is likely caused by incorrect HTML
markup, for example nesting block-level elements inside <p>, or
missing <tbody>. Bailing hydration and performing full client-side
render.
[Vue warn]: Unknown custom element: <v-btn> - did you register
the component correctly? For recursive components, make sure to
provide the "name" option.
I think it is an issue with configuration, v-btn is not available with social-sharing is being rendered, please suggest.
Thanks
I haven't installed those, but I can almost bet that the fact you are wrapping network components with a button is a problem.. Because the markup that it generates most likely looks like this:
<ul class="networks">
<button>
<li></li>
</button>
</ul>
Have you tried to replace this markup with:
<social-sharing>
<div>
<network network="facebook">
<v-btn><i class="fa fa-fw fa-facebook"></i> Facebook</v-btn>
</network>
<network network="facebook">
<v-btn><i class="fa fa-fw fa-twitter"></i> Twitter</v-btn>
</network>
</div>
</social-sharing>

How to hide header template based on condition?

I am new to kendo UI. i have created an Kendo-grid with angularJs . and i have configured an header template to that grid.here the code
headerTemplate: '# if(HierarchyNo!==1){# <i class="fa fa-arrow-circle-left fa-2x" aria-hidden="true"></i> #}#',
In here HierarchyNo is an Scope variable based on this variable the header template must shown to the user.If i execute the code then there is an design error like
I do not know what went wrong. is there any way to hide the headerTemplate based on condition. Please help me
use kendo.template("your template with condition"). It will work out.

Error: [$parse:syntax] when using ng-class

I have been following a pluralsight course called Creating Apps with Angular, Node and Token Authentication, and am writing my own custom alert messaging.
Basically, what I want to do, is to add different CSS classes depending on the state of the alert message.
When I load my app, I get the following error in the console:
Error: [$parse:syntax] Syntax Error: Token '}' is unexpected, expecting [:] at column 83 of the expression [{'flipInY': alert.show, 'flipOutY':!alert.show, 'alert-hidden:!alert.hasBeenShown'}] starting at [}]
I don't understand, since I'm pretty sure my syntax is correct. Can anybody point out what I'm doing wrong?
My html:
<div class="container" ng-cloak>
<div ui-view></div>
<div class="alert alert-{{alert.type}} animated main-alert" ng-class="{'flipInY': alert.show, 'flipOutY':!alert.show, 'alert-hidden:!alert.hasBeenShown'}"><strong>{{ alert.title }}</strong>
{{ alert.message }}
</div>
</div>
If you need more details, please ask, or check the Github repo. The relevant files are index.html in the root folder, register.js under app/scripts/controllers and alert.js under app/scripts/services.
Thanks for the help.
Change this:
'alert-hidden:!alert.hasBeenShown'
to this:
'alert-hidden':!alert.hasBeenShown
You missed a closing single-quote in property name.

Yii 2 wrong Routing?

I'm facing a problem but I don't know what may cause this.
When routing to some actions, for example when I click a button with the following code piece ..
Html::a('<button class="pull-right btn btn-info btn-lg"><span class="pull-right glyphicon glyphicon-th-large" ></span></button>',['user/create'],
['type'=>'button','align'=>'right']);
.. it routes to the default controller like the homepage!
Other buttons are routing right.
Any one can help what may cause wrong routing or wrong request?
Thanks a lot!
Try ['/user/create'] instead of ['user/create'].
Edit:
Should the URL be routed? If not, try to use user/create.
There are different ways you can use the URL parameter: http://www.yiiframework.com/doc-2.0/yii-helpers-baseurl.html#to%28%29-detail

Categories

Resources