We Keep Coding

Error: Template must have exactly one root element when creating a custom directive

I want to make a simple directive that has a button that will show if the cursor is placed over it. However, every time I include this new directive into my index.html I receive this error in return.
Here is the following error:
Error shown on console
Here is my template code:
<div>
<button ng-show="ishovering">DELETE</button>
</div>
Here is my directive code:
app.directive('deleteArea',function(){
return {
scope: {},
require: 'ng-show',
restrict: "AE",
replace: true,
templateUrl: "./templates/delete.html",
link: function(scope,elem,attrs){
elem.bind('mouseover',function(){
elem.css('cursor','pointer');
scope.$apply(function(){
scope.ishovering = true;
});
});
}
};
});
Any help is appreciated, thank you.

Just use bootstrap for angular called ui.bootstrap .
Use the popover directive that will give you the effect you need.

Is there a way to load data into script

So in Angular i'm trying to do
$scope.data = "<script> alert('hi'); </script>";
But unfortunately that doesn't work. I also tried to add ng-bind-html but without any results.
{{data}}
also I tried to load data in a script tag but that also seems not to work. Is there a way to avoid this all? For example
$scope.data = "bob";
-
<script>
var name = {{data}};
</script>

You could create a directive that will load the script into DOM dynamically.
Markup
<load-script ng-if="data" data="data"></load-script>
Directive
app.directive('loadScript', function($compile){
return {
restrict: 'E',
scope: {
'data': '='
},
link: function(scope, element, attrs){
element.append($compile(scope.data)(scope))
}
}
})
Working Plunkr

Your $scope will be already either within a <script> block or in a Javascript file.
Now, when/how do you want the alert to be called? If I understand correctly what you're trying to do, here's how to do it:
<div ng-click="doAlert()">
Click here to see an alert
</div>
and in your controller:
$scope.doAlert = function() {
alert('hi);
};

Get Dynamic HTML/JQuery to work with AngularJS

I have a web page that uses a directive called custom-html which loads a HTML web url into the page (allowing for sub-templates etc). I have this system configured so that it registers properly with $scope but I seem to be having issues to get JQuery listeners to work with it.
For instance I have the following at the bottom of one of my templates (where the custom-html tag is used above this point)
$(function() {
$(".datepicker").datepicker({ dateFormat: 'yy-mm-dd' });
});
The datepicker never works in the sub-templates I am including via the custom-html directive though. Does anyone have an idea on how I can remedy this? Below is the directive I am using:
backendApp.directive('customHtml', function($compile, $http){
return {
link: function($scope, element, attrs) {
$http.get(attrs['url']).then(function (result) {
element.html(result.data);
element.replaceWith($compile(element.contents())($scope));
});
}
}
});
Using JQuery 1.11.1 and AngularJS 1.2.22 at the moment. Thanks.
EDIT: My apologies, let me clarify the issue that I am having is that when i click on the .datepicker fields that are being inserted via the custom-html directive that it's not working. E.g. it's not opening up the JQuery datepicker as it should be when I click on the input field. When I do this with the regular HTML (not the custom-html) it works just fine.

The problem is that you need to run the datepicker() init AFTER the element gets compiled. So you should do it after you replace the actual html. The code you have above runs one time on page load (or wherever it is) and won't create datepickers for html elements created AFTER that point.
backendApp.directive('customHtml', function($compile, $http){
return {
link: function($scope, element, attrs) {
$http.get(attrs['url']).then(function (result) {
element.html(result.data);
element.replaceWith($compile(element.contents())($scope));
// DO DATEPICKER INIT HERE ON NEW ELEMENT
});
}
}
});
The better way to do it is a datepicker directive so you know the datepicker element has been compiled before you init it (in the link function)
backendApp.directive('myDatepicker', function($compile, $http){
return {
link: function($scope, element, attrs) {
// ONLY JOB IS INITING DATE PICKER HERE
}
}
});

UI Bootstrap with Flot causing misaligned ticks

I'm working on an Angular web-app with UI Bootstrap and have run into a problem with the y-tick label alignment in flot charts using UI tabs.
With standard bootstrap tabs, the plots match inside and outside the tabset:
http://jsfiddle.net/TDwGF/614/
However, with UI Bootstrap's tabset, we find that the y-tick labels overlap with the plot:
http://jsfiddle.net/TDwGF/615/
In playing with different approaches in building the flot directive, I can create a plot where only half of the y-tick labels are misaligned (I was not able to reproduce this well in a minimal example, however).
I cannot find any inherited css modifications that would cause these issues, and I haven't met with any luck in going through the tabs directive source code.
Any help would be appreciated.

I remember that something similar had already happened with me while working with Highcharts.
The root cause of the misalignment is probably the browser dynamic rendering timing restraining the canvas/svg container space.
To workaround this kind of issue, just wrap the plot creation with a timeout to render it on next digest cycle:
App.directive('chart', function() {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
var data = scope[attrs.ngModel];
setTimeout(function(){
$.plot(elem, data, {});
scope.$apply();
}, 0);
}
};
});
See working setTimeout fiddle here.
Anternatively you could inject angular $timeout, so it already calls scope.$apply() for you:
App.directive('chart', ['$timeout', function($timeout) {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
var data = scope[attrs.ngModel];
$timeout(function() {
$.plot(elem, data, {});
}, 0);
}
};
}]);
See working $timeout fiddle here.

Initialize Zurb Foundation 5 in an AngularJS Directive

I've created three plunkrs to illustrate my problem. I'm trying to create an AngularJS Directive that will initialize foundation and apply the necessary javascript to the loaded template. At first I was trying to use ngInclude to add the Foundation 5 nav bar to all of the pages of my website. The top bar works as expected when the html is directly applied to a partial. When the html is added in a directive, such as ngInclude, the top bar looses all its functionality. I suspect that this was because foundation is not getting initialized after the template is added by the directive. As a solution I created a custom directive that would initialize foundation and compile the html template. Initializing foundation the way I do freezes the application. Anyone have a solution to this?
Trying to achieve this without resorting to Angular UI.
Example 1: HTML directly applied to the view. Works as expected, when you click on the menu dropdown the pages are displayed.
http://plnkr.co/edit/aQc6j2W9MpRuJo822gAF?p=preview
Example 2: ngInclude used to load template to dom. No functionality is achieved, when you click on the menu dropdown nothing happens.
http://plnkr.co/edit/fSS3FfYKFilMXsIkYUHg?p=preview
Example 3: Created separate directive to replace ngInclude that would initialize foundation, compile, and load the template to DOM. Can't provide a plunkr because it would just freeze up, but here is the code.
.directive('testdirective', function($compile) {
return {
restrict: 'AE',
templateUrl: 'partials/includes/nav.html',
link: function(scope, element, attrs) {
$compile($(document).foundation())(scope);
}
}
})
applied in partial by:
<div testdirective></div>

Do this:
link: function(scope, element, attrs) {
$compile(element.contents())(scope);
$(document).foundation();
}
If you compile the element itself, you create an infinite loop:
$compile(element)(scope); //fail
Always be sure that you only compile the element's contents:
$compile(element.contents())(scope); //win
It seems that you are compiling the whole document and creating the infinite loop.
You can probably just do this:
templateUrl: 'partials/includes/nav.html',
compile: function() {
$(document).foundation();
}
because the template will be automatically compiled so you don't have to do it manually.
Note: it's best practice to inject and use Angular's $document, which is a wrapper for document that helps in testing. $($document).foundation();