I'm trying to build a "select" style directive that allows a template to be provided for each option but I'm struggling to get it working. Here's what I have so far:
ngApp.directive('mySelect', function ($compile) {
function link(scope, element, attrs) {
var template = element.html();
var selectedItemTemplate = template.replace("item", "selectedItem");
var html = "<div class='mySelect_selectedItem'>" + selectedItemTemplate + "</div>";
html += "<div ng-repeat='item in items'><div class='mySelect_item' ng-click='onItemClicked(item)'>";
html += template;
html += "</div></div>";
element = element.replaceWith($compile(html)(scope));
scope.onItemClicked = function (item) {
scope.selectedItem = item;
};
scope.selectedItemContainer = element.find(".mySelect_selectedItem");
scope.itemContainers = element.find(".mySelect_item");
scope.itemContainers.hide();
};
return {
link: link,
restrict: 'E',
scope: {
selectedItem: '=',
items: '=',
},
}
});
And usage would be something like:
<my-select items="things" selected-item="selectedThing">
<div>ITEM NAME: {{item.name}}</div>
</my-select>
Although on render I am getting what I would expect from my template, I can't seem to access the UI elements after the $compile, so the two jQuery selectors don't work. I am guessing I need to call the $compile method somewhere else, or perhaps there is a much easier way of doing this?
Plunker here: http://plnkr.co/edit/q7DevKOm3tpgmvYpjqlR?p=info
Related
I have a directive, where I'm trying to dynamically load different partials depending on an object that is injected into directive
function countSummary() {
var directive = {
scope: {
countData: '='
},
link: link,
template: '<div ng-include=\'countData.countType === "expected" ? ' + '"/app/count/countsummary/countExpected.html" :' +
'"/app/count/countsummary/countBlind.html"\'>' +
'</div>'
}
return directive;
function link(scope, element, attrs) { ... }
}
I'm using grunt-html2js to convert all html files to be added to $templateCache. I have verified that the html file is in added to $templateCache, however when I load the page it is having difficulty finding only the .html files that are referenced in the template function.
Is this a timing issue of any sort? Is there a better way to use the template function?
ng-include argument needs to evaluate to URL. I'd do the following, which will be dynamic as the scope variable changes (using the ng-if directive will conditionally switch between views):
function countSummary() {
var directive = {
scope: {
countData: '='
},
link: link,
template: '<div ng-if="countData.countType === \'expected\'" ng-include="\'/app/count/countsummary/countExpected.html\'"></div>' +
'<div ng-if="countData.countType !== \'expected\'" ng-include="\'/app/count/countsummary/countBlind.html\'"></div>'
}
return directive;
function link(scope, element, attrs) { ... }
}
An alternative way of doing this, which opens up a lot more options, is to compile in the link function:
<script type="text/ng-template" id="my_template_1">
<div ng-if="countData.countType === 'expected'" ng-include="/app/count/countsummary/countExpected.html"></div>
<div ng-if="countData.countType !== 'expected'" ng-include="/app/count/countsummary/countBlind.html"></div>
</script>
function link(scope, element, attrs) {
var html = $templateCache.get('my_template_1');
// parse HTML into DOM element
var template = angular.element( html );
// compile the template
var linkFn = $compile(template);
// link the compiled template with the scope
var el = linkFn(scope);
// append to DOM
element.appendChild(el);
}
I'm making a directive for a States Select in angular. It's working, but I spent a while trying to figure out a way to compile the template before it's in the DOM. It currently works like this:
app.register.directive('stateDropdown', ['StatesFactory', '$compile', function (StatesFactory, $compile) {
function getTemplate(model) {
var html = '<select ng-model="' + model + '" ng-options="state.abbreviation as state.name for state in states" class="form-control"></select>';
return html;
}
function link (scope, element, attrs) {
scope.states = StatesFactory.States;
element.html(getTemplate(attrs.stateModel));
$compile(element.contents())(scope);
}
return {
replace: true,
link: link
}
}]);
But as such it inserts the template into the element THEN compiles it against scope. Is there a better way to do this? Such as compiling the template before it's even inserted?
Scratch what I had before.
[Edit 2]
Using a dynamic model is a bit problematic trying to fit it into the normal Angular workflow.
Instead you will need to compile the template in the directive by hand but add the ng-model before doing so, You will also need to manage the replacement of the existing element with the built template.
module.directive('stateDropdown', function (StatesFactory, $compile) {
var template = '<select ng-options="state.abbreviation as state.name for state in states" class="form-control"></select>';
return {
scope: true,
controller: function($scope) {
$scope.states = StatesFactory.states;
},
compile: function($element, $attrs) {
var templateElem = angular.element(template).attr('ng-model', '$parent.' + $attrs.stateModel);
$element.after(templateElem);
$element.remove();
var subLink = $compile(templateElem);
return {
pre: function(scope, element, attrs) {
subLink(scope);
},
post: function(scope, element, attrs) {
}
}
}
};
});
A working example of this can be found here: http://jsfiddle.net/u5uz2po7/2/
The example uses an isolated scope so that applying the 'states' to the scope does not affect existing scopes. That is also the reason for the '$parent.' in the ng-model.
I have a requirement for consuming an array of objects within ng-grid that are custom styled to look like a tag (similar to tags on here).
I have taken the approach of using a cellTemplate and have created a custom directive for this.
What is happening is when you sort, other columns change but the 'Tags' column does not, it stays as is, like the directive isn't getting updated.
Here is my directive:
app.directive('tag', function($compile){
return {
restrict: 'EA',
link: function(scope, element, attrs) {
attrs.$observe('tags', function(value) {
var array = JSON.parse(value);
var newHtml = '<ul>';
for(var i=0;i<array.length;i++)
{
newHtml += '<li>' + array[i].text + '</li>';
}
newHtml += '</ul>';
var e = $compile(newHtml)(scope);
element.replaceWith(e);
});
}
}
});
Here is a plunker: http://plnkr.co/edit/OxeUPaLLWtiCnvmgehnl
Thanks
Don't know if this fulfils all your requirements but you can change your tag directive to this:
app.directive('tag', function($compile){
var ddo = {
restrict: 'EA',
template: '<div><ul><li ng-repeat="tag in tags">{{tag}}</li></div>',
scope: { tags: "=tags" }
};
return ddo;
});
Or if you want to keep your code, just change the DOM first and compile it afterwards:
app.directive('tag', function($compile){
var ddo = {
restrict: 'EA',
scope: { tags: "#tags" },
link: function(scope, element, attrs) {
attrs.$observe('tags', function(value) {
var array = JSON.parse(value);
var newHtml = '<ul>';
for(var i=0;i<array.length;i++)
{
newHtml += '<li>' + array[i].text + '</li>';
}
newHtml += '</ul>';
element.html(newHtml);
$compile(newHtml)(scope);
});
}
};
return ddo;
});
Edit: Also, if all you want to do is change the layout, nothing stops you from calling ng-repeat in your cellTemplate:
cellTemplate: '<ul><li ng-repeat="val in row.entity.arr">{{val}}</li></ul>'}
I'm trying to add an input element with ng-model inside a directive.
my code
the link function of my directive:
link: function (scope, element, attrs) {
var elem_0 = angular.element(element.children()[0]);
for (var i in scope.animals[0]) {
elem_0.append(angular.element('<span>' + scope.animals[0][i].id + '</span>'));
//this part doesn't work
var a_input = angular.element('<input type="text">');
a_input.attr('ng-model', 'animals[0][' + i + '].name');
//end
elem_0.append(a_input);
}
it seems i need to call $compile() at the end, but have no idea how.
Try
var a_input = angular.element($compile('<input type="text" ng-model="animals[0][' + i + '].name"/>')($scope))
elem_0.append(a_input);
You are making directive more complicated than necessary by manually looping over arrays when you could use nested ng-repeat in the directive template and let angular do the array loops:
angular.module("myApp", [])
.directive("myDirective", function () {
return {
restrict: 'EA',
replace: true,
scope: {
animals: '=animals'
},
template: '<div ng-repeat="group in animals">'+
'<span ng-repeat="animal in group">{{animal.id}}'+
'<input type="text" ng-model="animal.name"/>'+
'</span><hr>'+
'</div>'
}
});
DEMO: http://jsfiddle.net/Ajsy7/2/
I'm trying to write a directive that has a template. The template is rendering some DOM elements I want to retrieve. However, when I try to retrieve my DOM elements in the linking function, the DOM elements are not found. If I add a window.setTimeout method before selecting the elements they are found. How can I wait for a template to finish rendering before trying to manipulate the DOM in the linking function?
Here is the directive code for what I'm trying to do:
module.directive('testLocationPicker', function() {
var linkFn = function(scope, element, attrs) {
console.log('in linking function');
window.setTimeout(function() {
var positions = $('.position');
console.log('number positions found: ' + positions.length);
positions.click(function(e) {
console.log('position clicked');
scope.$apply(function() {
scope.selectedPosition = $(e.currentTarget).html();
});
});
}, 500);
};
return {
link: linkFn,
restrict: 'E',
template: 'Choose a position: <div class="position" ng-repeat="position in positions">{{position}}</div>',
}
});
I have a JS Fiddle of what I'm trying to do: http://jsfiddle.net/bdicasa/XSFpu/42/
I would recommend doing something like this instead:
var module = angular.module('test', []);
module.controller('TestController', function($scope) {
$scope.positions = [
'Test Position 1',
'Test Position 2',
'Test Position 3'
];
$scope.selectedPosition = '';
$scope.handleClick = function (index) {
$scope.selectedPosition = $scope.positions[index];
}
});
module.directive('testLocationPicker', function() {
return {
restrict: 'E',
template: 'Choose a position: <div class="position" ng-repeat="position in positions" ng-click="handleClick($index)">{{position}}</div>',
}
});
Instead of trying to search through the dom and add a click event, just modify your template like this:
template: 'Choose a position: <div class="position" ng-repeat="position in positions" data-ng-click="positionClick($index)">{{position}}</div>',
And then create a positionClick function in the linking function:
var linkFn = function(scope, element, attrs) {
scope.positionClick = function(index){
scope.selectedPosition = index;
}
};
Working jsFiddle: http://jsfiddle.net/XSFpu/77/
The reason your method is not working is because the ng-repeat hasn't fired after the template has loaded. So it's loaded the directive in, and the link function has been hit, but the ng-repeat actually hasn't started repeating yet. This is why I'm suggesting moving some of your code around to accomdate that.