We Keep Coding

Is it possible to inject ng-click to an ng-binded html div in angular?

I'm sending html back from my controller with this function :
$scope.filterLocation=function(obj){
var loc = $filter('filter')( $scope.locationss, {'product_code':obj});
var htmlstring = "";
angular.forEach(loc, function(value, key) {
htmlstring = '<div ng-click="locationModal()">' + htmlstring + value.location_description + '</div>';
})
return $sce.trustAsHtml(htmlstring);
}
I then have this html to show the list of locations :
<td><span ng-bind-html="filterLocation(l.productcode)" style="cursor: pointer;"></span></td>
The issue is, as you can see in the controller im sort of injecting '<div ng-click="locationModal()">' and when i view the inspector the function is there correctly :
<span ng-bind-html="filterLocation(l.productcode)" style="cursor: pointer;" class="ng-binding"><div ng-click="locationModal()">A5AL</div></span>
But when i try to click it i get no results, is it because it is inside the ng-bind-html? it was a div but i changed it to a span to see if that changed anything.

I'm doing this fast for the moment, but hopefully you'll have the begin of an answer.
You could do some workaround like this :
$scope.htmlstrings = [];
var string = {
htmlLoc: ''
};
angular.forEach(loc, function(value, key) {
string.htmlLoc= string.htmlLoc+ value.location_description;
$scope.htmlstrings.push(string);
})
I don't understand why you do htmlstring = htmlstring + value.location_description; tho.
Then :
<span ng-init="filterLocation(l.productcode);" ng-repeat="htmlstring in htmlstrings">
<div ng-click="locationModal();" ng-bind="htmlstring.htmlLoc"></div>
</span>
You can change this to a return way with : <span ng-init="htmlstrings = filterLocation(l.productcode);" ng-repeat="htmlstring in htmlstrings">
And without using var string = {} but var string = '' html looks like that:
<span ng-init="htmlstrings = filterLocation(l.productcode);" ng-repeat="htmlstring in htmlstrings">
<div ng-click="locationModal();" ng-bind="htmlstring"></div>
</span>
I'll develop this later. Hope it works in your case.

How to add a break between Array objects with knockout and tooltip

I have an array joined with commas in a tooltip. However I want each one be on it's own line. I've tried a few things but none seem to be working. The code is a knockout observable to which I am new too.
Here is my ko observable:
this.campaignTagString = ko.observable("");
(function() {
if(data.campaignTags != undefined) {
var array = [];
for(var tag in data.campaignTags){
array.push(data.campaignTags[tag].name);
}
//Join our campaign tag name array
var tagString = array.join(", " + '<br />');
$('#tooltip-campaigntags').tooltip({
content: function(callback) {
callback($(this).prop('title').replace('|', '<br />'));
}
});
var textCampaign = "Campaigns: ";
o.campaignTagString(textCampaign + tagString);
}
})();
I am calling it like so:
<span id="tooltip-campaigntags" class="label label-default label-mini" data-bind="html: '<i class=\'fa fa-tags\'></i> '+campaignTags().length, tooltip: { title: campaignTagString , placement: 'bottom' }" data-toggle="tooltip" data-placement="bottom" title="" >
</span>
Any help would be great, thanks!

Some tips:
You have an error in your code: if campaignTags is an object, campaignTags().length will not work; if it is an array, data.campaignTags[tag].name will not work.
You might find it useful to have a look at Knockout-Bootstrap, a Bootstrap adaptation that provides Knockout bindingHandlers for Bootstrap JS functions (used in demo below).
The Bootstrap documentation mentions the option {html: true} if you want your content not to be encoded into text.
Additionally, your IIFE (the function in which you wrapped the bootstrap tooltip functionality) should rather be a computed observable on your view model, as well as the icon html, and the string, all depending on campaignTags.
Below are the resulting JS viewModel and HTML binding if you follow these tips:
//params === object containing tag objects like -- tagX: {name: 'tag'}
function VM(params) {
var self = this;
this.campaignTags = params;
this.campaignTagsArray = ko.computed(function() {
var array = [];
for(var tag in self.campaignTags) {
array.push(self.campaignTags[tag].name);}
return array;});
this.campaignTagString = ko.computed(function() {
return "Campaigns: <br>" +
self.campaignTagsArray().join(", " + '<br />'); });
this.html = ko.computed(function() {
return '<i class="fa fa-tags"></i> ' +
self.campaignTagsArray().length });
}
And the HTML binding:
<span class="label label-default label-mini" data-bind="
html: html(),
tooltip: { html: true, title: campaignTagString() , placement: 'bottom'}">
</span>
Check out the fiddle for a demo.

AngularJS directive that appends HTML elements to existing element

I have an AngularJS, JS, JQ, HTML5 web app, which is capable of sending different HTTP methods to our project's RESTful Web Service and receiving responses in JSON.
It looks like this:
What I want is to create an AngularJS directive, which could accept JSON object and create an <li> for every JSON property it finds. If property itself is an object - the function should be called recursively.
Basically, I search a way to parse a JSON object to HTML elements in a such way that following JSON:
{
"title": "1",
"version": "1",
"prop" : {
"a" : "10",
"b" : "20",
"obj" : {
"nestedObj" : {
"c" : "30"
}
}
}
}
Would be transfrormed into following html:
<ul>
<li>title : 1</li>
<li>version : 1</li>
<li>
prop :
<ul>
<li>a: 10</li>
<li>b: 20</li>
<li>
obj :
<ul>
<li>
nestedObj :
<ul>
<li>c : 30</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Does anyone know how to achieve this using AngularJS directives? Every useful answer is highly appreciated and evaluated.
Thank you.

I tried this by recursivly include a directive. But this seems be really ugly.
My solution is just like the plain old html generated out of a recursive method and append as element:
//recursivly generate the object output
scope.printObject = function (obj, content) {
content = "<ul>";
for (var i in obj) {
if (angular.isObject(obj[i])) {
content += "<li>"+i+""+scope.printObject(obj[i])+"</li>";
} else {
content += "<li>" + i + ":" + obj[i] + "</li>";
}
}
content+="</ul>";
return content;
};
Full working code here:
http://jsfiddle.net/zh5Vf/1/

It has little to do with Angular (it's plain old JS), but for the fun of it, here is a directive that does what you want:
(It is a bit more lengthy in order to properly format the HTML code (indent) and support custom initial indentation.)
app.directive('ulFromJson', function () {
var indentationStep = ' ';
function createUL(ulData, indentation) {
indentation = indentation || '';
var tmpl = ['', '<ul>'].join('\n' + indentation);
for (var key in ulData) {
tmpl += createLI(key, ulData[key], indentation + indentationStep);
}
tmpl = [tmpl, '</ul>'].join('\n' + indentation);
return tmpl;
}
function createLI(key, value, indentation) {
indentation = indentation || '';
var tmpl = '';
if (angular.isObject(value)) {
var newIndentation = indentation + indentationStep;
tmpl += '\n' + indentation + '<li>' +
'\n' + newIndentation + key + ' : ' +
createUL(value, newIndentation) +
'\n' + indentation + '</li>';
} else {
tmpl += '\n' + indentation + '<li>' + key +
' : ' + value + '</li>';
}
return tmpl;
}
return {
restrict: 'A',
scope: {
data: '='
},
link: function postLink(scope, elem, attrs) {
scope.$watch('data', function (newValue, oldValue) {
if (newValue === oldValue) { return; }
elem.html(createUL(scope.data));
});
elem.html(createUL(scope.data));
}
};
});
And then use it like this:
<div id="output" ul-from-json data="data"></div>
See, also, this short demo.

Handlebars.js - concatenating an arbitrary string within an expression

An example:
Using handlebars.js if I wanted to do append an "#" to a username I would do this:
#{{username}}
However, what if I want to use a custom helper and have it applied to the entire block of text (including the "#") and not just the expression? Something like this...
handlebars.registerHelper('color', function(text) {
return text.red;
});
{{color "#"username}}
The above template is invalid, but you get the idea...

You can do this, for example:
<script id="template" type="text/x-handlebars-template">
<ul>
{{#each links}}
<li>{{{color prefix title}}}</li>
{{/each}}
</ul>
</script>
<script>
Handlebars.registerHelper("color", function(prefix, title) {
return '<span style="color: blue">' + (prefix ? prefix : "#") + title + '</span>';
}); // "#" is the default prefix
source = document.getElementById("template").innerHTML;
template = Handlebars.compile(source);
document.write(template({
links: [
{title: "prologin", prefix: "#", link: "http://prologin.org"},
{title: "1.2.1", prefix: "§", link: "#paragraph-121"},
{title: "jjvie", link: "http://twitter.com/jjvie"},
]
}));
</script>
<span class="username"></span> or <hl></hl> would be even better.

Suggest any Good mustache document

Suggest me any good mustache doc. Also i want to know in a mushtach loop how do i get the count or the loop no. I mean how can i do a for loop in mustache.
In the below code i wish to change the id in every loop
<script src="http://github.com/janl/mustache.js/raw/master/mustache.js"></script>
<script>
var data, template, html;
data = {
name : "Some Tuts+ Sites",
big: ["Nettuts+", "Psdtuts+", "Mobiletuts+"],
url : function () {
return function (text, render) {
text = render(text);
var url = text.trim().toLowerCase().split('tuts+')[0] + '.tutsplus.com';
return '' + text + '';
}
}
};
template = '<h1> {{name}} </h1><ul> {{#big}}<li id="no"> {{#url}} {{.}} {{/url}} </li> {{/big}} </ul>';
html = Mustache.to_html(template, data);
document.write(html)
</script>
<body></body>

You can't get at the array index in Mustache, Mustache is deliberately simple and wants you to do all the work when you set up your data.
However, you can tweak your data to include the indices:
data = {
//...
big: [
{ i: 0, v: "Nettuts+" },
{ i: 1, v: "Psdtuts+" },
{ i: 2, v: "Mobiletuts+" }
],
//...
};
and then adjust your template to use {{i}} in the id attributes and {{v}} instead of {{.}} for the text:
template = '<h1> {{name}} </h1><ul> {{#big}}<li id="no-{{i}}"> {{#url}} {{v}} {{/url}} </li> {{/big}} </ul>';
And as an aside, you probably want to include a scheme in your url:
url : function () {
return function (text, render) {
text = render(text);
var url = text.trim().toLowerCase().split('tuts+')[0] + '.tutsplus.com';
return '' + text + '';
//---------------^^^^^^^
}
}
Demo: http://jsfiddle.net/ambiguous/SFXGG/

Expanding on #mu's answer, you could also keep an index in the data object and have the template refer to it and the function increment it. So you wouldn't need to add i to each item.
see demo : http://jsfiddle.net/5vsZ2/