CSHMTL with angular and interpolation - angularjs

I'm pretty new in CSHTML. But i would like to ask if it is possible to do following. I have some Sitecore field and in cshtml i am using it like
#Html.Sitecore.Field('field')
Then i am using something like this in same cshtml but it is angular
{{value}}
Point is that it may change positioning in sitecore (based on words) so we have something like this {0} that i need to replace with angular value then.
is it possible to do something like following ? :
#Html.Sitecore.Field('field').ToString().Replace('{0}',{{value}})
Thanks a lot

Actually it worked in this way :
#Html.Raw(#Html.Sitecore().Field("Field").ToString().Replace("{0}", "{{value}}"))
I needed to put it into #Html.Raw() and change it to string with ToString()

Related

Use method="post" with a nested form in angular formly

How would one use the method="post" with nested forms like are found in this example: http://jsbin.com/gohefojiqa/1/edit?html,js,output ?
I'm guessing it has something to do with this: https://scotch.io/tutorials/submitting-ajax-forms-the-angularjs-way but I'm not sure how to implement it in a multistep/nested form like are present in the angular-wizard form.
Turns out my HTML was messed up...
Also, an alert in the example was also throwing it off a bit too. Fixed those two things and now we're good.

has-any-authorithy directive in jhipster application

I have created a new role ROLE_SUPERUSER in my jhipster application. I want a specific navbar menu to be visible to only admin and my new user.
I tried using has-any-authorithy as given in authority.directive.js but its not working.
I am using it in HTML like
has-any-authorithy="['ROLE_ADMIN','ROLE_SUPERUSER']"
Am I missing anything?
Code says:
authorities = attrs.hasAnyAuthority.replace(/\s+/g, '').split(',');
So it seems that the directive expects one string and not an array.
Try this:
has-any-authority="ROLE_ADMIN, ROLE_SUPERUSER"
There is a better way to do this. You can create a service only for this directive and return a "joined" array like this :
code in your service :
this.feature_1 = {
access: [ROLES.ROLE_ADMIN, ROLES.ROLE_SUPERUSER].join()
};
ROLES is a constant and an array of app roles defined in app.constants.js.
And in your template :
has-any-roles="{{accessService.feature_1.access}}"
By doing this, if you want to change the access rights, you have only to modify the accessService
And now in 2017 it is:
<a *jhiHasAnyAuthority="['ROLE_ADMIN', 'ROLE_USER']">Test</a>
In .html you can use this:
has-any-role="ROLE_ADMIN,ROLE_USER"
In 2016 version it should be:
has-any-authority="ROLE_ADMIN,ROLE_USER"
One more thing to add on that there should not space between the comma separated authorities, It did not work for me with a space after ",". As it considers space also part of authority string :
> has-any-authority="ROLE_ADMIN, ROLE_USER"
> has-any-authority="ROLE_ADMIN,ROLE_USER"
1st one will not work but second one will.
Now by the end of 2020, I stuck with the same problem to restrict field with multiple authorities!
<div *jhiHasAnyAuthority="['ROLE_ADMIN','ROLE_SUPERUSER']"> And this worked for me! </div>

Are html tags inside directive attribute valid in AngularJS

I was doing code review and found custom directive with html tags inside attribute:
<form-field help="Use <b>foo</b> option to blah blah"></form-field>
I find it very unusual, and thought that it will not work in older browsers. But when I and author of this code checked - it turned out that it works in every version of IE we had (10+) and in Chrome/FF without any troubles.
Moreover I checked it in W3C validator (validator.w3.org) and it looks like HTML allows to have unescaped tags inside attributes. This SO answers Can data-* attribute contain HTML tags? confirms that too.
So my question is: Can this make troubles when used with AngularJS? Will this behavior change in Angular 2.0? And finally is this accepted usage of attributes?
I personally would like something like this:
<form-field>
<help>
Use <b>foo</b> option to blah blah
</help>
</form-fild>
Yes, you can do that with ng-bind-html directive. Take a look at this: https://docs.angularjs.org/api/ng/directive/ngBindHtml

display current value of ng-class in AngularJS

I have to track down a bug related to work of ng-class (sometimes it adds new value without removing old).
So I need a quick reference to see it's current value.
Is there any short (or not) way to bind that to the content?
I mean something like this:
<div ng-class="something">
{{ngClassValueDisplayedHere}}
</div>
I had exactly the same problem with ng-class not removing old value. After days of investigation it turned out that it was ngAnimate who was messing with class changes. removing it from angular module dependencies solved the problem (Angular 1.3).
ng-class can bind to many different things. From the documentation:
Expression to eval. The result of the evaluation can be a string representing
space delimited class names, an array, or a map of class names to boolean
values. In the case of a map, the names of the properties whose values
are truthy will be added as css classes to the element.
So in your example, just display whatever your something is. It's supposed to be an angular expression, which can be evaluated like any other with double-curlies. This will help you debug your ng-class
<div ng-class="something">
{{something}}
</div>
Demo
In case someone else stumbles upon this problem like I did just recently with angular version 1.5.8: https://github.com/angular/angular.js/issues/14582
P.S. Update to 1.5.11 solved the issue related to ngAnimate, prior versions still had the same issue.

How to dynamically set alternate text to images in angularjs

Is it possible to add alternate text to images dynamically in angularjs.
I tried this.
alt={{dynamicText}}.
Simply setting like this doesnt seem to work.
You just have to use "" just like in normal html. So:
alt="{{dynamicText}}"
It was the problem of Chrome browser. As explained here, putting it like this solves the issue.
title="{{dynamicText}}"
Use []: [alt]="dynamicText"

Resources