I'm trying to show or hide a div using ng-if directive in AngularJS.
It works but it still appears in the html source code.
How can I completely remove the div from the html?
This is how I'm doing it:
<div ng-if="user != null && user != 'Error'">CONTENT</div>
Thanks!
How can I completely remove the div from the html?
AngularJS' ng-if Places a comment wrapping your element, so if ng-if evaluates to false, your element is removed but it is marked with the comment.
AngularJS runs on the client, so your template(html) will look how you code it. It evaluates and manipulates your template on the browser, unlike MVCs that you can do with ASP MVC and PHP which will construct the html on the server and send it to the client 'ready', AngularJS needs the 'raw' template, and do the manipulation in the client side. So looking in the view source will not show you how angularjs manipulated your template, you can look at it using the developer tools
Related
i am using in front side AngularJS and in the back Spring.
when i try to get my first or other page, scopes appear like that {{user.fName+' '+user.lName}} in a few seconds its replace with there values.
I want that scope appear directly with there values
Can you be more specific with what you meant by "my first or other page scopes "
Do you mean that initially you get curly braces with angular code - which after a few seconds changes to the actual angular values? If that is the case you need to use ng-cloak in the containing html element. Please refer to the angular JS documentation.
Using jQuery, it's easy to replace the innerHtml of a single div, either with content from the elsewhere in the HTML, from a JavaScript var, or from an HTTP call.
How can I do that in AngularJS (without using jQuery)? For example, to keep a page the same, but only replace a side panel?
Try using ng-view / ui-router . More details :
https://docs.angularjs.org/api/ngRoute/directive/ngView
angular-ui/ui-router, how do I inject partial view using $stateProvider?
It seems the answer is: "Think twice if you need to do this." In Angular, the paradigm isn't to modify the HTML, but rather to bind the HTML. So, bind the div's src to a scope or controller var via ngInclude, and just change that var.
I have jsonData which consist of HTML content. I want to render that HTML in ng-grid. The content is not rendered however -- it only shows up in normal string format.
Below is the plnkr which shows all the code:
http://plnkr.co/edit/RlWyDqCUUR15dmLM7ePV?p=preview
There's a few things going on here:
Not related to your exact issue, but you've got nested single quotes in your firstName field. You need to do some escaping or your ng-click expression is going to break. So instead of ng-click='show('F:/cox/main.html')' you can do ng-click=\"show('F:/cox/main.html')\".
Also not related to your exact issue, but if you want to access properties on your controller's scope from inside UI-Grid you need to use appScope. The docs on it are here: http://ui-grid.info/docs/#/tutorial/305_appScope
The main problem with getting HTML provided from inside your app to render is Strict Contextual Escaping.
Strict Contextual Escaping (SCE) is enabled by default in Angular and escapes any arbitrary HTML to prevent things like XSS and clickjacking. In order to get your HTML to show up you need to trust it, and bind it with an HTML bind expression.
You can use the $sce service to trust the HTML. Just iterate over your rows and do $sce.trustAsHtml(row.firstName). (You can read more about SCE here: https://docs.angularjs.org/api/ng/service/$sce) Then you will need a custom cell template to bind the HTML. The simplest one looks like this:
<div class="ui-grid-cell-contents" ng-bind-html="COL_FIELD"></div>
COL_FIELD will get transformed by UI-Grid into the proper binding for your field. Now the problem is that your ng-click directive doesn't get compiled. You need to use a directive that will take your custom HTML and compile it. You could roll your own, or use something like this library to do it for you: https://github.com/incuna/angular-bind-html-compile
The main thing to keep in mind is being able to actually trust the source of your HTML. If you can't be sure then going about this another way (i.e. by not providing HTML inside your data set) would be better.
I've modified your plunker to show all this working together: http://plnkr.co/edit/MgLoeGBoRTi2fF3e6pia?p=preview
I'm playing some experiments using AngularJS and Leaftlet (I'm new at both of them). I see I can specify some HTML as markers.bindPopup(...); parameter. Does anyone tryied to show an AngularJS directive as parameter? I tryed this way whit no success (no surprise) bindPopup(<myDummyDirective></myDummyDirective>). I want to show my directive as marker's popup, is there a way to do this?
Use $compile:
Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.
$compile('<myDummyDirective></myDummyDirective>')(scope);
See the reference: https://docs.angularjs.org/api/ng/service/$compile
I am building a service to handle modal windows in my Angular application, so there is a bit of manual work with linking a template, scope and controller.
I'm using $compile like so, to build the template and attach to the scope, for example:
$compile('<h1>This is my window</h1><img src="{{ imageUrl }}">')($scope);
Everything is working fine, but... the browser tries to load anything such as an image before the HTML string has even been evaluated for Angular expressions. For example, in this case, the browser tries to literally load "http://myhost.com/{{ imageUrl }}", and then immediately afterwards will load the correct URL as the Angular expression is picked up.
This happens immediately upon the $compile()($scope) is called, without even attaching/inserting the returned template to the DOM.
Basically the browser seems to be parsing the HTML before Angular replaces the Angular expressions - any kind of remote content in the HTML at all will be requested by the browser. How is this so?
Use ng-src instead of src. That's what it's for.
You need to use ng-src in the img tag.