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.
Related
I know this question has been asked a bunch of times before, I read through the answers, tried the offered solutions, but I'm still getting the error and I'm not sure why. I stripped my application down to a simple hello world to try and figure out why its happening.
<!--index.html -->
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
<script type="text/javascript"
src="./controller/MainController.ctrl.js"></script>
</head>
<body >
<div ng-controller="HelloController">
<test-dir/>
</div>
</body>
</html>
//controller/MainController.ctrl.js
var app = angular.module('app',[]);
app.controller("HelloController", function($scope) {
});
app.directive('testDir', function (){
return {
restrict:'E',
replace:true,
template:`template/helloWorld.template.html`
};
});
<!--template/helloWorld.template.html -->
<div>
<h1>hello, is it me you're looking for</h1>
</div>
if you are providing the link to the template file you should use templateUrl not template.
If you want to use template you have to write
"template":"<div>...</div>"
Change from template to templateUrl
`template:`template/helloWorld.template.html`
to
templateUrl :template/helloWorld.template.html
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>
I downloaded the seed project from git. Basically, changed the code in following three files -
app.js
angular.module('app', []);
index.html
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</head>
<body ng-controller="MessageController">
<div class="container">
<h1>{{title}}</h1>
</div>
</body>
</html>
MessageController.js
angular.module('app').controller("MessageController",function(){
alert("inside message controller");
var vm = this;
vm.title = 'AngularJS Tutorial Example';
});
When I run http://localhost:8000/app/index.html, it displays {{title}} and not the value inside controller.
I am new bie in angular and trying to learn but unable to figure out whats wrong here.
You appear to have two different things happening.
First you appear to have missed adding your javascript dependencies to your html file.
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script>
<script src="MessageController.js"></script>
</head>
An additional note
Because you are using multiple files (which is fine), make sure you include the app.js file before the MyController.js file.
You also need to correctly access the scope. Even if you add the javascript dependencies you will get a blank page if not bound correctly.
Because you are using var vm = this; format you need to be sure to use the control as annotation
<body ng-controller="MessageController as myctrl">
<div class="container">
<h1>{{myctrl.title}}</h1>
</div>
</body>
Working Plunker Example
Another options is to directly extend $scope in your controller. You could then just have {{title}} on your page and it should bind correctly.
angular.module('app').controller("MessageController",['$scope',function($scope){
alert("inside message controller");
$scope.title = 'AngularJS Tutorial Example';
}]);
var yourapp = angular.module('app', []);
yourapp .controller('MessageController', function ($scope) {
alert("inside message controller");
$scope.title = 'AngularJS Tutorial Example';
});
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've copied this code directly out of a book, and from what I can tell it should work, but it isn't. I'm not getting any errors, but the Recommendation value is just displaying the angular string (in curly braces), and the console.logs are never getting hit. Where am I going wrong? (Obviously there's a typo somewhere, but I don't know if it's my code or the book's).
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
</head>
<body>
<form data-ng-controller="CalcController">
Starting: <input data-ng-change="computeNeeded()" data-ng-model="funding.startingEstimate">
Recommendation: {{funding.needed}}
</form>
<script>
function CalcController($scope) {
$scope.funding = {startingEstimate:0};
computeNeeded = function() {
console.log("running");
$scope.funding.needed = $scope.funding.startingEstimate * 10;
console.log("funding needed: " + $scope.funding.needed);
};
$scope.$watch('funding.startingEstimate', computeNeeded);
}
</script>
</body>
</html>
Looks like this is missing an ng-app tag somewhere (I'd put it on the html). That directive tells Angular to bootstrap itself onto the page.
<html ng-app>
Edit: docs for ng-app: http://docs.angularjs.org/api/ng.directive:ngApp