I am trying to have my kendo options in angularjs model and the grid is not loading.
I would like to store the options like (vm.test.mainGridOptions={}), which is not working. Whereas if the options are stored like vm.mainGridOptions={} it's working.
Failing version:
https://dojo.telerik.com/iPiTIVOY/2
Please help me out.
Angularjs is throwing an error in console, at least in that URL
TypeError: Cannot set property 'mainGridOptions' of undefined
This sounds like a typo. You should check that "test" variable not to be undefined.
Bonus: ngCloak directive
The ngCloak directive is used to prevent the AngularJS html template
from being briefly displayed by the browser in its raw (uncompiled)
form while your application is loading. Use this directive to avoid
the undesirable flicker effect caused by the html template display.
Related
I am using .NET MVC Razor as my view engine and attached an Angular controller to that view. This view is functional. However, it contains a strange behavior when the page got loaded or refreshed.
For example, if I put something like {{vm.FirstName}} into the view. When the page got loaded, I can see the pure text of "{{vm.FirstName}}" for a very short time. The text will soon be disappeared and then I will see the actual value of that property.
Any idea how to fix this problem?
Thank you guys.
If you place your curly braces {{}} in the main index.html, it will show up before angular has time to start up and parse the scope variables into the DOM.
You can use the ng-bind directive to overcome this so the text will only show after angular parses the variables.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-init="foo='hello world!'">
<h1 ng-bind="foo"></h1>
</div>
Some (advanced?) angular is making my head hurt.
The goal is to extend a WYSIWYG HTML editor to allow users to insert certain angular directives into arbitrary HTML content. I have chosen medium-editor and its angular-medium-editor wrapper (but I'm not wedded to that if there are better solutions).
This Plunk shows how the editor directive is instantiated and activated (using an editable attribute). The toolbar is customised to include a button which adds a custom directive around selected text: <my-custom-directive class="bg-info"> ... </my-custom-directive>. (For demonstration, the custom directive wraps (transcludes) its contents in a button which triggers an alert when clicked).
I'm having problems with (re-)compiling the editor's content so that the directives inside the editor compile. Using $compile(element.contents())(scope) throws ngTransclusion:orphan errors for directives which uses transclusion. (I understand this is due to angular already having made the transclusion by the time the editor's link function is called.)
I cannot refactor all potential custom directives to not use transclusion.
What pattern can I use to successfully compile arbitrary editor content (which may include many different directives), ideally whenever that content changes, or at least when the editing is finished? Is this one of the "fringe cases" where the use of $compile is justified? If so, how do I use it?
This question and answer made me realise that the way to do this is to $compile only the inserted element when it is inserted, rather than recompiling the whole section.
Handily, rangy's classApplier module allows for an onElementCreate callback which can be used to compile the custom directive as it is added.
Here's the working plunker.
I've run into a problem where refreshing an AngularJS page in IE shows the uncompiled AngularJS. I can use ngCloak to hide the uncompiled expressions when loading, but I can't find anything for when the page unloads. I can use ngBind instead of an expression, and then the expressions disappear instead of displaying raw, but I'm hoping for a better solution. Any ideas?
I'm still working on a demo where you can see the issue; I think the iframes used to display results in code snippets and stuff like JSFiddle are preventing me from replicating the problem.
A few tips that may or may not help.
Contrary to common advice, load Angular in head of document. That way when you hit an ng-if during page load, the browser knows what to do with it. If it's in footer ng-if is meaningless until page is loaded and thus elements flash up and then disappear during page load
Use class .ng-cloak as you are doing already.
Use booleans in controller to dictate when to display elements. E.g.
<section ng-if='controller.loading === false'>
you could place some of or your entire markup for a view in such a div to remove elements until they are ready for display
Play with ng-if ng-show and ng-hide, ng-if actually removes elements from the DOM whereas the other two just show or hide. They can produce very different results in terms of smoothness of page loading.
Where you use an expressions on an ng-if, be careful to ensure the expression is very accurate. Don't be sloppy with the expression. Consider what would happen if the var in the expression was undefined. Would your element show when you don't want it to?
Whilst I haven't directly dealt with unloading these same concepts can be applied.
In this question why ng-bind is better than {{}} in angular?
I understand the differences between {{}} and ng-bind. On the other hand, I can use ng-cloak instead of ng-bind.
Now my question is what are the differences between ng-bind and ng-cloak?
They do the same job relatively.
Looking at api docs, you may find what are they exactly.
ngCloak
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
The ng-cloak directive is a built-in angular directive that hides all of the elements on the page that contain the directive.
<div ng-cloak>
<h1>Hello {{ foo }}</h1>
</div>
After the browser is done loading and the compile phase of the template is
rendering, angular will delete the ngCloak element attribute and the element
will become visible.
ngBind
The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.
Using ng-bind instead of {{ }} will prevent the unrendered {{ }} from showing up instead of empty elements being rendered. The example from above can be rewritten to the following which will prevent
the page from flickering with {{ }}:
<div>
<h1>Hello <span ng-bind="foo"></span></h1>
</div>
You can look up things like that in the Angular Api Docs.
ng-cloak is just a css rule that sets the style to display: none !important so your {{}} expression is not visible until replaced with actual data.
https://docs.angularjs.org/api/ng/directive/ngCloak
While ng-bind is an expression itself.
When you use ng-bind, browser do ignore this while after angular is loaded , it binds the value in the view.
While if you use ng-cloak, {{}} will still appear for a short time, but as soon as angular is loaded and parsed, it will omit the {{}} till the compilation occurs.
From documentation
The ngCloak directive is used to prevent the Angular html template
from being briefly displayed by the browser in its raw (uncompiled)
form while your application is loading. Use this directive to avoid
the undesirable flicker effect caused by the html template display.
https://docs.angularjs.org/api/ng/directive/ngCloak
In a practical sense, if you pass your model into a view from the server, then ng-cloak is fine -- when the page renders, your view data is populated. However, if you're using a more mobile-friendly approach of loading your html and loading your data and perhaps localization with an additional call, then ng-model prevents {{}} flicker between when your page loads and your data arrives. However, I find ng-model insufficient as it can't be used universally, so I generally put an ng-show on a container that exposes the view after the data has been retrieved and a flag has been set.
I have an AngularJs template that I would like to re-use with my Kendo Multiselect Item Template and Tag Template.
Is there any way to do this? I'm not sure how to pass data. When I just try to use AngularJS templates, it doesn't work.
Kendo UI templates are just a javascript functions which accepts single parameter - objects to render and return rendered html.
AngularJS template is an HTML fragment which is rendered by $compile service and stored by $templateCache.
It is theretically possible but hard way.