Using $compile to compile a piece of HTML in AngularJS - angularjs

In my controller,
I have a piece of code that outputs a string self.selectedProduct using template string expression..
This works as expected.
var productName = `
<div class='vertical-spacer'>|</div><div> ${self.selectedProduct}</div>`;
But when I want to add a directive that code breaks
var template = angular.element("<my-dropdown domainobject="domainobject"></my-dropdown>");
var linkFn = $compile(template)($scope);
productName = $(`
<div class='domain-wks-vertical-spacer'>|</div><div>`);
productName.append(linkFn);
So instead of the ${self.selectedProduct} I want to show the directive.
But I am not able to.
What am I doing wrong?

You are breaking the string using double quotes (") inside another double quote.
Try this:
var template = angular.element('<my-dropdown domainobject="domainobject"></my-dropdown>');

Related

If for some field getText() returns NULL then what other functions could use to get the string of that field?

I was asked this question in an interview.
If you cannot get the string by getText() because it returns NULL. Then how would you get the string of a field in selenium webdriver?
There can be several ways:
Using selenium with getting the attributes of the element:
InnerText can be empty in some cases, thats why you can also try with innerHTML.
var innertext = element.getAttribute("innerText");
var innerHtml = element.getAttribute("innerHTML");
Or you can execute js script
var element = element(by.id('something');
var response = browser.executeScript('var el = arguments[0]; return {text: el.innerText, html: el.innerHTML};', element);
console.log(response.text)
console.log(response.html)
There is also a variant of execute script from selenium, document query element and return the innerText or innerHTML or and other property from it.

Compiling an element with AngularJs attributes after the page is loaded

I need to create multiple <a ng-click="controller.doThat(X)"> elemets, based on a response from some $http call. And add them to an element designated by its id attribute.
I am using AngularJs v1.6.4. Please help.
var newElem = $compile(t)($scope);
document.getElementById("designatedDiv").appendChild(newElem[0]);
does the job as long as t is a string of a single element:
var t = "try and press <a ng-click=\"controller.doThat(X)\">here</a> and see..."
will result in:
Error: [jqLite:nosel] http://errors.angularjs.org/1.6.4/jqLite/nosel
at angular.min.js:6
BUT if you redo the last example as following:
var t = "<span>try and press </span><a ng-click=\"controller.doThat(X)\">here</a><span> and see...</span>"
var newElem = $compile(t)($scope);
for (i=0;i<newElem.length;i++)
document.getElementById("designatedDiv").appendChild(newElem[i]);
then it works as expected.

Angular $compile misbehaving when returning value

I'm trying to use Angular $compile to compile my template.
My template looks like this:
var template = '<div>{{obj.someValue}}</div>';
I'm showing my data in another ctrl/view:
$scope.obj.someValue = "hi";
$scope._html = '';
<div>{{html}}</div>
Now at some point I render my template.
$compile(template)($scope);
$scope._html = template;
At this point I'm confused. Because template hasn't changed.
So I tried the following:
$scope._html = $compile(template($scope);
This does work and compile the template correctly, but my entire console is flooded with errors:
TypeError: Illegal invocation
at Sa (angular.js:265)
at r (angular.js:319)
What am I doing wrong exactly?

angular: programmatically format a number using the $locale information

I have included the corresponding locale file and it works fine. In any template I can do things like:
{{ value | number: 2}}
and it correctly formats the number according to the locale info.
Now I need to use the same locale info from javascript code in a controller to build a string.
I'm using a javascript component (a d3 graph to be precise) and I want to build strings to attache to it, so the template system is useless for this, but I'd like to take the locale configuration of numbers and dates from it.
So I'd nee something like this pseudocode:
var formattedValue = $local.format(value, { 'number': 2 });
Or something like that
Anyone knows how can I achieve that?
Try this :
var formattedValue = $filter('number')(value,2);
Working : http://plnkr.co/edit/aC4p95y52YZyoUEdQVzo?p=preview
We can achieve this by implementing a filter.
var app = angular.module('app', []);
app.filter('yourFilter', function(){
return function(string){
// build the string whatever you are trying to achieve
return newString; // return the string you achieved
}
});
for reference, http://blog.trifork.com/2014/04/10/internationalization-with-angularjs/
I could inject the filter like this:
presuApp.run(function ($rootScope, numberFilter) {
var formattedValue = numberFilter(value, 2);
[...]
It's just the name of the filter followed by th 'Filter' suffix.

AngularJs - QueryString value & ng-include

I am trying to capture the querystring and apply the value to my ng-include.
My querystring: http://mydomain.com/?target=W7ROP175T5TEHW2
My MainCtrl: $scope.target = $location.search()['target'];
$scope.target is picking up the value.
Doing a simple text write, ie {{target}} works.
This does not work: <div ng-include="'/_UserSession/{{target}}/assets/menu.html'"></div>
Any ideas?
You need to escape the value, it is an expression.
ng-include="'/_UserSession/' + target + '/assets/menu.html'"
Also if you want to make sure that target is set before it attempts to include the template, you can add ng-if ="target". This way it will avoid a bad request.
OK, I solved it, I hope this helps others as well:
HTML
<ng-include src="session()"></ng-include>
Controller
$scope.target = $location.search()['target'];
$scope.session = function() {
return "/_UserSession/" + $scope.target + "/assets/menu.html";
};

Resources