I have an angular directive where I'm compiling a template via the templateCache after the directive has loaded. For some reason, my {{}} is being output in the template instead of being parsed and replaced with their respective values. Does anybody know why?
The template looks like this
<script type="text/ng-template" id="input">
<input class="cirque-input" ng-model="model" value="{{model}}" type="{{fieldtype}}" ng-change="updateForm()" />
</script>
and in my directives link function, I get the template and display it with
var tmpUrl=$templateCache.get(scope.template);
elm.html(tmpUrl);
$compile(elm.contents())(scope);
clearly I'm doing something wrong here, but I can't figure out what.
Compile first and then replace element with new html:
var tmpUrl=$templateCache.get(scope.template);
var compiledContents = $compile(elm.contents())(scope);
// here i'm not sure about the html method
elm.html(compiledContents);
// maybe you have to use
// elm.replaceWith(compiledContents[0])
I had a similar problem but I use replace... you may want to try:
var tmpUrl=$angular.element($templateCache.get(scope.template));
elm.append(tmpUrl);
$compile(tmpUrl)(scope);
or
var tmpUrl=$angular.element($templateCache.get(scope.template));
elm.append(tmpUrl);
$compile(elm)(scope);
Related
i have an ng-repeat but i need to use Angular expression inside javascript of my html page(of course app and controller are declared, but have not been posted here):
<div ng-repeat="eleRubrique in scopeComplet">
<script type="text/javascript">
alert('index ' + {{$index}});
</script>
</div>
That does not work. what would be a workaround ?
Thank you for an answer.
I think this would work for you
<div ng-repeat="eleRubrique in scopeComplet" ng-init="alert('index ' + $index)"></div>
And if you would need a more complex script I would recommend to write a function for that and call the function from ng-init
You should not use double curly braces {{}} in JavaScript. They are meant for HTML only in Angular.
Since the JavaScript code in your HTML has nothing to do with the view, can you not achieve the same goal in the controller?
Premise: I'm new to AngularJS and trying to learn it. In the following example I'm monitoring text lenght and cursor position in a textarea. It does work, indeed.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.pos = function() {
var id = document.getElementById("myArea");
return id.selectionStart;
}
$scope.len = function() {
return $scope.myTextarea.length;
}
$scope.myTextarea = "Ciao, sono una textarea";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<textarea id="myArea" ng-click ng-keyup ng-model="myTextarea" ng-trim="false"></textarea>
<br/>
<br/>
<div>Length: {{ len() }}</div>
<div>Cursor position: {{ pos() }}</div>
</div>
</body>
My question is: is there a more "angular" way to do it (I mean without using JQuery, or getElementById or similar)? Is there a better way to access the "selectionStart" property of the "myArea" textarea, without having to search the DOM for an ID?
In general, is there a way in AngularJS to access the element bound to an ngModel (something like "$scope.myTextarea.boundElement")?
In a previous version of this code I used to define two event handlers to get the value of selectionStart. Then I noticed that ng-click and ng-keyup simply need to be there, even without being associated to an actual function, to make the code work.
In any case they're necessary to get the correct value of selectionStart. On the other hand they're not necessary to make "length" work. I would have expected that changes to "selectionStart" were monitored "automagically" like "length" and that something like a "return $scope.myTextarea.selectionStart" would do.
Is this possible, somehow?
I have some values as amount like 1000, 2000, <b>3000</b>, <4000>, <b>5000</b> inside JSON as an API response. I want to render this response inside a table. So I tried ng-bind-html. BUT it is showing only the value which are having tags like 3000,5000. I want to show all values , 1000,2000,4000 as a plain string and 3000,5000 in BOLD/or any other HTML tag.
angular.forEach($scope.arr2.test,function(item)
$scope.res=$sce.trustAsHtml(item.amount);
return $scope.res;
});
On HTML side, I have something like this
<td id="price" class="edit" ng-repeat="pro in d.procedure" ng-bind-html="valueCheck(d._id,pro._id,hos._id)"></td>
You can use ng-bind-html and ng-bind-html-unsafe for this. But please be mindful of the security concerns here.
You can find more details here
Do make sure you sanitize your strings, to prevent security vulnerabilities
First of all you need to download the ng-sanitize js
https://docs.angularjs.org/api/ngSanitize
and then inject ng-sanitize to angular module.
then you can use ng-bind-html and ng-bind-html-unsafe
you can use ng-sanitize module for the same - see here
var app = angular.module("myApp", ['ngSanitize']);
I've got this element:
<span id="tag_span"> {{ selectedSection }} </span>
And I want to get its content from controller, which is {{ selectedSection }}. I can get the element like this:
angular.element('#tag_span');
but don't know how to get what inside of it. Any ideas?
P.S. document.getElementById won't work in the case so there's no need to suggest it.
EDIT: No jQuery allowed.
You get the value by $scope.selectedSection from your controller.
If you need the get html inside the span element use
angular.element($('#tag_span')).html();
You need to reference the jquery before angular js like below.
<script type="text/javascript" src="../../Scripts/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="../../Scripts/angular/angular.js"></script>
Your all html elements are properties of $scope, so you could easily access the content via $scope.selectedSection . Your controller function definition must have a scope injection like function controller($scope), that is all.
I am trying to bind data to angular template. But I'm facing the following issue.
I am using $templateCache to retrieve the template but I cannot find data into the template.
$templateCache.get('q1.index.html');
Now, I am also trying to do $compile($templateCache.get('q1.index.html')); but I am getting Error: [jqLite:nosel] http://errors.angularjs.org/1.3.14/jqLite/nosel error.
Can someone please let me know what I am doing wrong & how can I resolve it.
You need to use this format for your <script> tag
<script type="text/ng-template" id="templateId.html">
<p>This is the content of the template</p>
</script>
then somewhere else you can retrieve with $templateCache
$templateCache.get('templateId.html')
Or via ng-include
<div ng-include="'templateId.html'"></div>