This code is not working in my AngularJS file:
angular.element('document').ready(function() { $('.tooltipped').tooltip({delay: 50}); });
But when i put an alert inside, it pops up the alert message. The ToolTip code is not working though I've included all the required materialize CSS and js files. It works fine when I use the same code for a static element, but not working with dynamic element.
That's because angularjs rerenders the template so the DOM is not the same anymore and has no plugin attached to it. When using angulajs, jQuery plugins mostly won't work because of that, therefore you have to create a directive to allow angularjs to orchestrate the plugin initialization so it apply the plugin when you dynamically add the new element.
Try something like this:
app.directive('tooltipped', function (){
return {
restrict: 'C',
link: function (scope, elem, attrs) {
$(elem[0]).tooltip({delay: 50}); });
}
};
});
You may try for this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Tooltip - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$('#age').tooltip({delay: 50});
});
</script>
<style>
label {
display: inline-block;
width: 5em;
}
</style>
</head>
<body>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
<p>Hover the field to see the tooltip.</p>
</body>
</html>
Related
I am trying to learn to create non modal popup using angularjs that will allow to navigate to other webpage when it is still open and it should not blur the window. I found http://yong2579.github.io/ link.
But window is getting blur
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<title>Tabindex</title>
<meta charset="utf-8" />
</head>
<body>
<script type="text/javascript">
$(function () {
var dialog = new BootstrapDialog({
message: 'Custom tabindex.',
tabindex: 10,
modal: false,
title: 'Modeless draggable dialog',
draggable: true,
animate: false
});
dialog.open();
});
</script>
</body>
</html>
In the context of angular if you are making DOM manipulations (adding or removing elements from the view or modifying their properties) then you should use directives. For bootstrap modals and other interactive bootstrap elements check out the ui-bootstrap module with lots of directives including modal:
https://angular-ui.github.io/bootstrap/#!#modal
Modal's are sort of a special case in angular where it makes the most sense to have a service handle opening/closing modals but the docs there should make it pretty clear how to use if not search here or post a new question with issues.
When using ui-bootstrap you just include the bootstrap.css and ui-bootstrap-tpls.js file (not the bootstrap.js or jquery.js). If you don't include jQuery before angular, angular will load jQuery lite (see docs on angular.element() for details).
I'm using the Chosen plugin with AngularJS and Bootstrap. I'm also using a custom directive with code from the Chosen documentation for styling with Bootstrap:
app.directive("chosen", [function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var config = {
'.chosen-select' : {},
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width' : {width:"95%"}
};
for (var selector in config) {
$(selector).chosen(config[selector]);
}
}
};
}]);
But when I apply this directive to the select box, it prevents the model from updating with the selected items. I've tried using chosen-bootstrap css and angular-chosen but cannot get it to work. Both left the select box unstyled (same as removing the custom directive) which leads me to believe it's an issue with Bootstrap.
Here's the issue recreated in Plunker: http://plnkr.co/edit/AE1jo9fiRN1pvU6dKFSI?p=preview
If you remove the "chosen-select" class on the select element it works fine but is not styled properly.
Any help would be much appreciated.
After a bit of googling seems like moving jQuery before Angular solved some other people's issues with Chosen + ng-model not updating. Your Plunker worked after I moved the script reference to jQuery before Angular.
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.min.css" rel="stylesheet" />
<script data-require="jquery#2.1.4" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8" data-require="angular.js#1.4.8"></script>
<script src="https://code.angularjs.org/1.4.8/angular-route.js" data-semver="1.4.8" data-require="angular-route#1.4.8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.proto.min.js"></script>
<script src="script.js"></script>
</head>
See working Plunker here: http://plnkr.co/edit/ISqrJiiYB3a0ATkR1Dei?p=preview
I am attempting to implement the Kendo UI Editor with Angular, per the example on their demos website. So far it works pretty well;
kendo ui demos
This is what I have so far, but the problem I am having is actually rendering a fully parsed preview of the contents of the editor. When I use ng-bind-html, it works when the page first loads, but then any subsequent edits have HTML peppered into it. I thought the answer would be to use kendo.htmlEncode, but that isn't working either. I'm not quite getting the hang of this like I thought I would...
I have prepared a jsBin to show what is going wrong, as well as posted my code here for review.
jsBin
app.js
(function(){
var app = angular.module("kendoDemos", [ 'kendo.directives', 'ngSanitize' ]);
app.controller('EditorController', function($scope, $sce){
$scope.html = "<h1>Kendo Editor</h1>\n\n" +
"<p>Note that 'change' is triggered when the editor loses focus.\n" +
"<br /> That's when the Angular scope gets updated.</p>";
});
app.directive('kendoHtml', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
return element.html(kendo.htmlEncode(scope[attrs.kendoHtml]));
}
};
});
})();
html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/kendo.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular.sanitize.js"></script>
<script type="text/javascript" src="js/kendo.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div ng-app="kendoDemos">
<div ng-controller="EditorController" class="container">
<h2>Kendo Editor</h2>
<textarea kendo-editor ng-model="html"></textarea>
<h3>Kendo Editor Preview</h3>
<blockquote kendo-html="html"></blockquote>
</div>
</div>
</body>
</html>
You need to do two things:
Prevent the editor from encoding its value.
<textarea kendo-editor ng-model="html" k-encoded="false"></textarea>
Avoid using kendo.htmlEncode because it will encode it one more time.
scope.$watch(attrs.kendoHtml, function() {
element.html(scope[attrs.kendoHtml]);
});
Here is the updated jsbin: http://jsbin.com/bibecima/1/edit
You can also use ng-bind-html to avoid the need of a custom directive: http://jsbin.com/kamenoju/1/edit. It will work as expected once you set the encoded option to false.
I am on the early steps toward Learning Angularjs as a frontend framework, and I want to feed my index page dynamically with css rules that will be inserted into the of the page under the tag, I don't know if it is possible to use ng-repeat inside style tag or not, Because I don't want to use the inline css style on html element .
Example :
I have many #font-face rules (tokens) that I want to declare in the dynamically then I can apply the style="font-family:whatever,serif" to the html element.
Here is controller.js
var fontsApp = angular.module('fontsApp', []);
fontsApp.controller('FontsListCtrl', function ($scope, $http) {
$http.get('fonts.php').success(function(data) {
$scope.styles = JSON.parse(data.css);
});
});
And this is the html page
<!DOCTYPE html>
<html ng-app="fontsApp" ng-controller="FontsListCtrl">
<head>
<meta charset="UTF-8" />
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<script src="js/angular-1.2.19/angular.min.js"></script>
<script src="js/controllers.js"></script>
<style type="text/css" ng-repeat="rule in styles" >
I want to Repeat the Css rules here
{{rule.css}}
</style>
</head>
<body >
This is not working . How Can I do it using Angularjs ?
Ok, For anyone has this problem and looking for simple answer, the best answer I found to solve this issue is to create a directive and bind it to templateUrl.
fontsApp.directive('stylekom', function() {
var directive = {};
directive.restrict = 'A'; /* restrict this directive to Attribute */
directive.templateUrl = "fonts.css";
return directive;
});
and in your html file add a new head element called , with an attribute called stylekom which is identical to the directive we have created in the above code .
<style stylekom></style>
Now the file fonts.css should be created using the php script in fonts.php
I am trying to implement me custom directive of AngularJS.
Let's say the code look like below.
<!DOCTYPE html>
<html lang='en' ng-app='testApp'>
<head>
<meta charset='utf-8'/>
<meta http-equiv='X-UA-Compatible' content='IE=edge'/>
<meta name='viewport' content='width=device-width, initial-scale=1'/>
<script src="angular.js"></script>
<script src="searchinput.js"></script>
</head>
<body>
<searchInput></searchInput>
</body>
</html>
searchInput.js
var testApp = angular.module('testApp', []);
testApp.directive("searchInput", function() {
return {
replace:true,
restrict: 'AE',
template: '<h3>Hello World!!</h3>'
}
});
Unfortunately I didn't see the expected result . Does anyone know anything I missed ? thanks.
change
<searchInput></searchInput>
to
<search-input></search-input>
check it out in the AngularJS documentation for more details
In my case, even having a hyphen didn't help. The entire tag had to be in lowercase (on angularjs/1.3.16).
My custom directive textReplace did not work initially. Then, I checked with text-replace, which also did not work. Finally, checked with textreplace, which worked.