here i am trying to display the expressions as it is {{x}}*{{y()}}:
But it is evaluated always.i have checked across the portal for possible answers and found none.
Here is a JSFiddle to illustrate the problem
Use ng-non-bindable directive.
This directive prevents the compilation of inner elements.
Markup
<body ng-app="myApp" ng-controller="myCntrl">
<code ng-non-bindable>{{x}}*{{y()}}:</code> {{x}}*{{y()}}
</body>
More on this at: https://docs.angularjs.org/api/ng/directive/ngNonBindable
Related
trying to switch from tooltip-html-unsafe to tooltip-html because the former one is deprecated in ui-bootstrap 0.13.0
in the example, the tooltip-html content is provided in the controller as
Check me out!
$scope.htmlTooltip = $sce.trustAsHtml('I\'ve been made <b>bold</b>!')
is there a proper solution for when the content is inside an ng-repeat?
simply switching to tooltip-html produces a $parse error
EDIT / SOLUTION:
Actually, i got around it by simply adding single quotes like so:
tooltip-html="'Line 1<br>Line <strong>2</strong>'"
I think when the html is more complicated, you need to use the answer by Shawn below
Use the tooltip-template directive.
controller:
$scope.fruits=["Bananas","Apples","Oranges"]
html:
<div ng-repeat="fruit in fruits">
<div tooltip-template="'myTooltipTemplate.html'">TOOLTIP</div>
</div>
<script type="text/ng-template" id="myTooltipTemplate.html">
<b>Fruit</b> : {{fruit}}
</script>
link to plunkr: http://plnkr.co/edit/yUPl6hCACHKzvCBwrDUf?p=preview
I have a conditional ng-include directive with a ng-controller associated, but it seems the controller isn't run when the condition is true.
The target is to include the template only when the condition is met and avoid the TypeError: Cannot call method 'insertBefore' of null issue.
For example:
<div ng-include src="myContent.imgList ? 'ui/image-list.html' : null" ng-controller="ImgListSubCtrl">
</div>
When myContent.imgList is filled with data, I expect the image-list.html template to be appended to the DOM and ImgListSubCtrl to be run, but it isn't.
Is this the expected behavior?. I'm using Ionic Framework with Angular 1.2.17.
Thank you.
I already found an explanation, though further comments are welcome.
The following Codepen shows the mentioned behavior and the solution (in Ionic Framework 1.0.0-beta12): http://codepen.io/anon/pen/FnojD?editors=101
The first include doesn't display any count, though the second one displays it correctly.
It seems that when using ng-include along with ng-controller, the controller is only run once, even when the ng-include src expression evaluates to null.
To run it when the template is actually included (when ng-include src isn't null), a solution is to avoid the conditional ng-include and wrap it in a ng-if block, so the whole element is re-created dynamically, as shown in the Codepen above.
In the example from the question:
<div ng-if="myContent.imgList">
<div ng-include src="'ui/image-list.html'" ng-controller="ImgListSubCtrl">
</div>
</div>
I hope it helps.
I have an issue that when ng-app is on the same tag as (AngularUI) ui-view, none of my tests run and I get:
Error: Error while waiting for Protractor to sync with the page: {"message":"angular.element(...).injector(...) is undefined","stackTrace":[{"fileName":"http://localhost:3000/","lineNumber":71,"methodName":"anonymous/<"},{"fileName":"http://localhost:3000/","lineNumber":76,"methodName":"anonymous"},{"fileName":"http://localhost:3000/","lineNumber":68,"methodName":"handleEvaluateEvent"}]}
Html that gives me the above error:
<html><head></head><body>
<div ng-app="app" ui-view></div>
</body></html>
If I move the ui-view directive to a nested div, my tests work fine:
<html><head></head><body>
<div ng-app="app">
<div ui-view></div>
</div>
</body></html>
My app works fine with either tag configuration, only the tests have errors with the first one.
What could be the explanation for this behavior?
The problem is that when ng-app and ui-view are declared on the same element, angular.element().injector() is undefined. However, if they're on different elements, the injector exists for both elements.
This is because of an interaction between ui-router and angular, because the ui-view directive uses transclusion. Using a directive using transclusion on the same element as ng-app results in it not having the correct injector via angular.element().injector(). Here's a simplified example: https://gist.github.com/juliemr/ffccf5bbe5b88a2d3da9
I think that this is all working as intended and the solution is to just not use ng-app and ui-view on the same element.
In AngularJS when using ng-app: ng-app found in the document will be used to define the root element to auto-bootstrap as an application.
In some of the application it is being used as data-ng-app.
Is there any difference in both of the following declaration, If Yes what & If No then which one is significant and why ?
1.
<body ng-app>
<p>{{ 1 + 2 }}</p>
</body>
2.
<body data-ng-app>
<p>{{ 1 + 2 }}</p>
</body>
Both and are the same except for the fact that if you want your template/code to be according to be HTML compliant and follow the best practices. Use data-ng-app.
This is what the official documentation quotes:
"Best Practice: Prefer using the dash-delimited format (e.g. ng-bind for ngBind). If you want to use an HTML validating tool, you can instead use the data-prefixed version (e.g. data-ng-bind for ngBind). The other forms shown above are accepted for legacy reasons but we advise you to avoid them."
Hope that answers your question.
Cheers!
See the answer:
ng-app vs. data-ng-app, what is the difference?
Only diffrence regarding html5 validation
ng-app isn't strictly valid html.
Custom attributes should be prefixed with data- to be valid.
So angular added this syntax so users could still have valid html.
(Knockout also uses data- attributes.)
There is absolutely no difference in functionality.
Source: w3.org - custom data attributes
ng-app and data-ng-app both are similar to each other, the only difference between them is sometimes HTML validators will show an error while using ng-app. so that time you can use data-ng-app.
note: x-ng-app also have the same property. You can use x-ng-app too instead of using data-ng-app.
I have a script tag in my DOM that contains a template like the folllowing:
<body>
<div ng-insert='ui'></div> <!--inject ui here-->
<script id='ui' type='text/html'>
<div ng-model='name'></div>
</script>
</body>
...and I wish to add it into the DOM using a directive like the ng-insert I made up above.
I haven't found a built in one to do this yet. ng-include seems to only load in remote templates. I think this would be a reasonably simple directive to write, which I may try, but I wanted to make sure I'm not reinventing something that already exists.
ng-include can be used in combination with predefined templates using type="text/ng-template" on a script tag.
<script type="text/ng-template" id="templateId.html">
This is the content of the template
</script>
Note: the script tag containing the template does not need to be included in the head of the document, but it must be below the ng-app definition.
later use this to get the template:
<div ng-include="'templateId.html'"></div>
Note: the template's name is in single quotes, as a string.
You can also get this template via JavaScript:
$templateCache.get('templateId.html')
Refernces:
http://docs.angularjs.org/api/ng.directive:script
http://docs.angularjs.org/api/ng.$templateCache
I think ng-include and script type="text/ng-template" is what you're looking for
http://jsfiddle.net/mrajcok/MfHa6/