Develop Reference

Treat String as Template in AngularJS

How can one utilize a string contained within a variable as a template?
For example:
Controller
$scope.items = [
{
name: "Bruce Wayne"
},
{
name: "Lucius Fox"
}
];
$scope.template = "<input ng-model='item.name' type='text'>";
View
<div ng-repeat="item in items">
<div ng-bind-html="<!-- The `template` variable defined in the controller. -->">
</div>
</div>
I've tried $sce.trustAsHtml, which only doesn't connect with the actual scope when using things like ng-model='item.name'. Reading through the $sce docs I don't think that it provides anything that can trust a string as a template.
A fiddle for you to play with.

to actually bind data from ng repeat to input need to compile the html. for that this directive can be used
app.directive('dynamic', function($compile) {
return {
restrict: 'A',
replace: true,
link: function (scope, element, attrs) {
scope.$watch(attrs.dynamic, function(html) {
element[0].innerHTML = html;
$compile(element.contents())(scope);
});
}
};
});
<div ng-repeat="item in items">
<div dynamic="template">
</div>
</div>
$scope.items = [
{
name: "Bruce Wayne"
},
{
name: "Lucius Fox"
}
];
$scope.template = "<input ng-bind='item.name' type='text'>";
Demo

Update an angular treeview directive when a new object is added to the collection

I have a treeview directive credit to http://codepen.io/bachly/pen/KwWrzG for being my starting block. that I am trying to update when I add objects to the collection. I can update the object and insert the new objects but the treeview directive is never called once the $scoped item is updated.
Ultimately the data used will come from a service at this point I am just testing with mock data.
The original collection looks like this
$scope.myList = {
children: [
{
name: "Event",
children: [
{
name: "Event Date",
parent:"Event",
children: [
{
name: "2008",
filterType: '_eventStartDate',
parent: 'Event'
},
{
name: "2009",
filterType: '_eventStartDate',
parent: 'Event'
}
]
},
{
name: "Event Attendee",
parent: "Event",
children: [
{
name: "Person 1",
filterType: '_eventAttenddeeName',
parent: 'Event Attendee'
},
{
name: "Person 2",
filterType: '_eventAttenddeeName',
parent: 'Event Attendee'
}
]
}
]
}]
};
var TheOtherCollection = {
children: [
{
name: "A New Event",
children: [
{
name: "The Other Date",
parent: " A New Event",
children: [
{
name: "2010",
FilterType: '_eventStartDate',
Parent: '_event'
},
{
name: "2011",
FilterType: '_eventStartDate',
Parent: '_event'
}
]
}
]
}]
};
This generates a tree view with checkboxes using the following directive and html
app.directive('tree', function () {
return {
restrict: 'E',
replace: true,
scope: {
t: '=src',
filter: '&'
},
controller: 'treeController',
template: '<ul><branch ng-repeat="c in t.children track by $index" src="c" filter="doSomething(object, isSelected)"></branch></ul>'
};
});
app.directive('branch', function($compile) {
return {
restrict: 'E',
replace: true,
scope: {
b: '=src',
filter: '&',
checked: '=ngModel'
},
template: '<li><input type="checkbox" ng-click="innerCall()" ng-model="b.$$hashKey" ng-change="stateChanged(b.$$hashKey)" ng-hide="visible" /><a>{{ b.name }}</a></li>',
link: function (scope, element, attrs) {
var clicked = '';
var hasChildren = angular.isArray(scope.b.children);
scope.visible = hasChildren;
if (hasChildren) {
element.append('<tree src="b"></tree>');
$compile(element.contents())(scope);
}
element.on('click', function(event) {
event.stopPropagation();
if (hasChildren) {
element.toggleClass('collapsed');
}
});
scope.stateChanged = function(b) {
clicked = b;
};
scope.innerCall = function() {
scope.filter({ object: scope.b, isSelected: clicked });
};
}
};
});
And then the html
<div ng-controller="treeController">
<tree src="myList" iobj="object" filter="doSomething(object, isSelected)"></tree>
<a ng-click="clicked()"> link</a>
</div>
When a checkbox is clicked the new collection is added to the existing one using lodashjs
ng-click event
$scope.doSomething = function (object, isSelected) {
if (isSelected) {
var item = object;
console.log(item);
nestAssociation(object, $scope.myList, TheOtherCollection);
}
}
which creates the new array and adds it within the children array
function nestAssociation(node, oldCollection, newAggregates) {
// var item = fn(oldCollection, node.parent);
var updatedArray = _.concat(oldCollection.children, newAggregates);
console.log(updatedArray);
if (updatedArray != null)
updateMyList(updatedArray);
}
I can see in the output I have a new object but I can't get the treeview to update. I have tried within the directive to add a $compile(element) on the click event in the directive but since the array is not built yet nothing changes.
Do I need to add a $watch to this directive and if so where or is there some other way I can get the directive to re-render and display the new nested collection?
Update
Base on some of the feedback and questions here is a little more detail around the question. The issue I am seeing is not in the directive as far as moving data around the issue is I cannot get the treeview to re-render once an array is added to the existing model.
The following link is a working plunker that shows the project as it currently works.
Running chrome dev tools I can see in the output the model is updated after a checkbox is selected
While I see the object is updated, the directive never updates to show the new array added to the object. This is the part that I need help understanding.
thanks in advance

You pass the function to the inner directives (which is the best practice), but you have access to scope.filter. Not doSomethingFunction. This one is undefined there.
filter="doSomething(object, isSelected)"
=>
filter="filter(object, isSelected)"
app.directive('tree', function () {
return {
restrict: 'E',
replace: true,
scope: {
t: '=src',
filter: '&'
},
controller: 'treeController',
template: '<ul>
<branch ng-repeat="c in t.children track by $index"
src="c" filter="filter(object, isSelected)">
</branch>
</ul>'
};
});
Next :
You can never access $$ variables in angularJS, because they are private. Maybe you should make one from your DB..., but the $$hashkey seems a easy solution though.
checked attribute might throw an error, because ngModel does not exist on your tree directive template. (put at least a ? before)
A checkbox can not have as model a $$hashkey.
Ng-change and ng-click will always be called at the same time, use the simplest one.
app.directive('branch', function($compile) {
return {
restrict: 'E',
replace: true,
scope: {
b: '=src',
filter: '&'
},
template: '<li><input type="checkbox" ng-click="innerCall(b.$$hashKey)" ng-model="isChecked" ng-hide="visible" /><a>{{ b.name }}</a></li>',
link: function (scope, element, attrs) {
scope.isChecked = false;
var hasChildren = angular.isArray(scope.b.children);
scope.visible = hasChildren;
if (hasChildren) {
element.append('<tree src="b"></tree>');
$compile(element.contents())(scope);
}
element.on('click', function(event) {
event.stopPropagation();
if (hasChildren) {
element.toggleClass('collapsed');
}
});
scope.innerCall = function(hash) {
if(scope.isChecked){
scope.filter({ object: scope.b, isSelected: hash });
}
};
}
};
});
UPDATE
You have the same treeController in your tree directive and in your index.html view.
This is what causes the view not to update!
I deleted the one in your directive, otherwise you'll have a controller for each child.
You saw the good console.log message in your controller, but it was in a controller for ONE directive.
You were not accessing the controller of the index.html.
Then I fixed the filter function communication between childs :
You forgot to communicate the filter function when you append new tree's :
element.append('<tree src="b" filter="filter({ object: object, isSelected: isSelected })"></tree>');
Also, in your parent directive template, you also need the hash to send parameters to the function :
filter="filter({ object: object, isSelected: isSelected })"
I edited your Plunker HERE without changing the code with the above comments I made.
(I'm not sure what you write is not what you want and because you did not comment I rather not change it so you still undertand your code fast)
But the view is updating now!
I think a little debug with what you want and the comments above should be enough.
EDIT 2
You forgot to return an object with the property chrilden. You returned an array, which caused the problem.
function updateMyList(data) {
var transformed = { children : data };
$scope.myList = transformed;
}
Here is a working PLUNKER.

Try $scope.$apply() after adding

How to evaluate Angular expression in child directive and expose it on parent directive?

I have a directive that represents a group of objects, let's call it people.
This directive has an ng-repeat in its template that repeats a child directive, e.g. person, which has an expression attribute personGreeting which should evaluate on its scope.
Both people and person use isolate scope.
How can I set up these directives such that I can expose personGreeting on the people directive and have it be evaluated within the scope of the person directive?
Here is an example:
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.myPeople = [{
id: 1,
name: 'Bob'
}, {
id: 2,
name: 'Steve'
}, {
id: 3,
name: 'Joe',
}]
})
.directive('people', function() {
return {
scope: {
peopleList: '=',
eachPersonGreeting: '&'
},
template: '<ul><person ng-repeat="currentPerson in peopleList" person-greeting="eachPersonGreeting(currentPerson)"></person></ul>'
}
})
.directive('person', function() {
return {
scope: {
personDetails: '=',
personGreeting: '&'
},
template: '<li>{{personGreeting(personDetails)}}</li>'
}
})
.directive('people2', function() {
return {
scope: {
peopleList: '=',
eachPersonGreeting: '#'
},
template: '<ul><person-2 ng-repeat="currentPerson in peopleList" person-greeting="{{eachPersonGreeting}}"></person-2></ul>'
}
})
.directive('person2', function() {
return {
scope: {
personDetails: '=',
personGreeting: '#'
},
template: '<li>{{personGreeting}}</li>'
}
})
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</head>
<body ng-controller="ctrl">
<h4>Here we are just using an in-line expression with ng-repeat, which works as you'd expect:</h4>
<ul>
<li ng-repeat="currentPerson in myPeople">Hello, {{currentPerson.name}}!</li>
</ul>
<h4>But what if we have custom directives, `people`, and `person`, and we want to let consumers of our `people` directive specify how each `person` should be greeted without making them override our directive's template, and also have data binding still work?</h4>
<h4>Unfortunately, this doesn't seem to work:</h4>
<people people-list="myPeople" each-person-greeting="'Welcome, ' + personDetails.name + '!'"></people>
<h4>Neither does this:</h4>
<people-2 people-list="myPeople" each-person-greeting="Welcome, {{personDetails.name}}!"></people-2>
</body>
</html>
I also started delving into the compile, link and controller functions for both of the directives, as well as the $interpolate service, and got it kind of working, but it got really weird and messy, and I couldn't get data binding working, so it felt like wasted effort. I feel like this should be simple, but it doesn't seem to be.
Is there an elegant way to do this?

How the greeting depends on the user itself?
Is there any way to create a service that knows how to produce customised greeting?
If not, what about Proxy object? https://www.youtube.com/watch?v=AIO2Om7B83s&feature=youtu.be&t=15m1s
I've discovered it yesterday and, from my perspective, it seems that it fits here. You should create proxy object for each guest, inject it to the guest directive and during the link phase put the parsed (done by angular) greeting into the that injected proxy object.
Also, I think that something you're doing can be done on much simpler way than setting the attribute from the outside and parsing that.

Okay I managed to put together a simple guestbook app using the same concept that works: http://plnkr.co/edit/R7s6xE?p=info
angular.module('guestbookApp', [])
.controller('guestbookCtrl', function($scope) {
$scope.latestGuests = [{
id: 1,
name: 'Bob'
}, {
id: 2,
name: 'Steve'
}, {
id: 3,
name: 'Joe',
}];
$scope.newGuest = {
name: ''
};
$scope.addGuest = function() {
$scope.latestGuests.push(angular.extend(angular.copy($scope.newGuest), {
id: $scope.latestGuests.length + 1
}));
$scope.newGuest.name = '';
};
})
.directive('guestList', function($parse) {
return {
scope: {
guests: '='
},
template: '<ul><li guest ng-repeat="currentGuest in guests | limitTo: -5" guest-details="currentGuest"></li></ul>',
controller: function($scope, $element, $attrs) {
this.greeting = function(scope) {
return $parse($attrs.greeting)(scope);
};
}
};
})
.directive('guest', function($parse) {
return {
scope: {
guestDetails: '='
},
template: '{{greeting}}',
require: '?^guestList',
link: function(scope, element, attrs, controller) {
var updateGreeting;
if (controller) {
updateGreeting = function() {
scope.greeting = controller.greeting(scope);
};
} else if (attrs.greeting) {
updateGreeting = function() {
scope.greeting = $parse(attrs.greeting)(scope);
};
}
scope.$watch('guestDetails.name', function() {
updateGreeting();
});
}
};
});
<!DOCTYPE html>
<html ng-app="guestbookApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.js"></script>
</head>
<body ng-controller="guestbookCtrl">
<h4>Latest guests:</h4>
<guest-list guests="latestGuests" greeting="'Welcome, ' + guestDetails.name + '!'"></guest-list>
<h4>Type your name below to sign the guestbook:</h4>
<input type="text" ng-model="newGuest.name" />
<button ng-click="addGuest()" ng-disabled="!newGuest.name">Sign</button>
<div ng-if="newGuest.name">
<p guest guest-details="newGuest" greeting="'Hello, ' + guestDetails.name + '! Click \'Sign\' to sign the guestbook!'"></p>
</div>
</body>
</html>
If anyone has any suggestions on how this could be improved please let me know! I still feel kind of yucky about the use of $parse and $watch, but maybe it's unavoidable?

AngularJS converting object to string in directive

I need some help with getting AngularJS to maintain my non-string values in directive attributes.
I was looking for a way to render a tree structure in HTML from a piece of JSON, and I found this code: http://jsfiddle.net/n8dPm/
I've been trying to adapt that for my project, as shown in the code below.
My controller/directive is shown here:
cxpControllers.controller("ProductTocCtrl", ["$scope", "$http", "$routeParams",
function ProductTocController($scope, $http, $routeParams) {
$scope.typeOf = typeOf;
//test value
$scope.contents = {
"id": 1,
"name": "Test",
subsections: [
{
id: 2,
name: "Test1.1",
link: "test11.xml",
test: 34
},
{
id: 3,
name: "Test1.2",
link: "test12.xml",
test: 95
}
]
}
}]);
cxpControllers.directive('tree', function($compile) {
return {
restrict: 'E',
scope: {key: "=", content: "="},
templateUrl: "tree_renderer.html",
compile: function(tElement, tAttr) {
var contents = tElement.contents().remove();
var compiledContents;
return function(scope, iElement, iAttr) {
if(!compiledContents) {
compiledContents = $compile(contents);
}
compiledContents(scope, function(clone, scope) {
iElement.append(clone);
});
};
}
};
});
And then this is my template:
<script type="text/ng-template" id="tree_renderer.html">
{{key}}:
<ul ng-if="typeOf(content) == 'object' && content != null">
<li ng-repeat="(key, content) in content">
<tree key="key" content="content"></tree>
</li>
</ul>
<span ng-if="typeOf(content) != 'object'">
"{{content}}"
</span>
</script>
<ul>
<li ng-repeat="(key, content) in contents">
<tree key="key" content="content"></tree>
</li>
</ul>
This would work, except for one problem. Angular is turning the value of "content" into a string, preventing the recursion from working because it can't iterate over a string.
I have seen other questions like this, for example here, but their problem is that they used "#" in the directive scope, which converts to a string. But since I'm using "=", it should maintain the type.
Here's the output I'm seeing with the test data shown in the code above:
I would appreciate any help you can give. If you need more information I'll be happy to supply it.

The problem is with the typeOf function in your template. The compiled template doesn't find this function so it is never equal to 'object'. Add a controller to your directive to define it.
I took the plunkr and added this:
controller: function($scope) {
$scope.typeOf = function(val) {
return typeof val;
};
},
It does recognize it as an object. Check out the updated plunkr here.

Angular $compile on scope with ng-repeat doesn't work

I have a directive that uses the $compile service to generate a template. It won't generate the select options using ng-options or ng-repeat, even though I clearly have the users array set in my scope. Why doesn't this work? This just gives me a blank <select> field with no options.
angular.module("myApp").directive("selectForm", [
'$compile',
function($compile) {
return {
restrict: 'C',
scope: true,
link: function(scope, element, attrs) {
scope.users = [
{ id: 1, name: "User 1" },
{ id: 2, name: "User 2" }
];
element.on('click', function(e) {
var selectHtml = $compile('\
<select\
class="col-lg-2 form-control"\
ng-options="user.id as user.name for user in users">\
</select>\
')(scope);
$(element).html(selectHtml);
});
}
}
}
]);

There is something to change in your code to make it work:
<select> works only when you also supply ng-model
Wrap your code inside scope.$apply.
Call element.off("click") to unsubscribe to the event to avoid flickering.
DEMO