This question already has answers here:
AngularJS angular-seed starter project adding directives
(2 answers)
Closed 7 years ago.
this is my first try to write a directive.....and i tried to do my best.
index.html
<!doctype html>
<html lang="en" ng-app="APP">
<head>
<meta charset="utf-8">
<title>Custom Directive</title>
</head>
<body>
<personName fname="Debditya" lname="Dasgupta"></personName>
<script src="bower_components/angular/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
var APP = angular.module('APP',[]);
APP.directive('personName',function() {
return{
restrict:"E",
link:function(scope,element,attrib){
scope.fullName = attrib.fname + " "+ attrib.lname;
console.log(scope.fullName);
},
replace:true,
template:"<h1>{{fullName}}</h1>"
}
});
My problem is that directive not rendering anything. Why is the directive not rendering correctly?
You code appears to be working :) in your dom, just change
<personName>
to <person-name> :)
personName in your HTML should be person-name, from Angular documentation:
The normalization process is as follows:
1- Strip x- and data- from the front of the element/attributes.
2- Convert the :, -, or _-delimited name to camelCase.
See Normalization for more details
Related
I have a node.js application running Express and express handlebars as the templating framework. I have recently started learning Angular and integrating it in my node.js app.
The only issue is, the markup for express-handlebars and angular is same. Both framework use {{}}. I did some research and found this Stackoverflow question: Using Express Handlebars and Angular JS
The accepted answer suggests changing the markup symbols using the interpolateProvider. I implemented this and it does not work for me (I have commented under that answer).
My code looks like this:
main.handlebars
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>GETTING STARTED WITH Angular</title>
<meta name="description" content="An interactive getting started guide for Brackets.">
<link rel="stylesheet" href="/css/style.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('//');
$interpolateProvider.endSymbol('//');
});
app.controller('DemoController', function() {
this.label = "This binding is brought you by // interpolation symbols.";
});
</script>
</head>
<body>
{{{body}}}
<input ng-model="name">
<h3>Hi, //name// how are you doing</h3>
<div ng-controller="DemoController as demo">
//demo.label//
</div>
</body>
</html>
The above code is from the main.handlebars layout file. I even tried to put that code in the actual view but it did not work. What am I missing?
Thanks.
This issue is occurring because of an incorrect app name reference or a simple typo. Change ng-app="myapp" to ng-app="myApp".
This question already has answers here:
Angularjs Uncaught Error: [$injector:modulerr] when migrating to V1.3
(5 answers)
Closed 7 years ago.
This whole app should consist of an h1 element that says 'Adrian' and a paragraph that says 'He lives in Orlando'. I can't figure out what's wrong with my code. BTW, I already know that this isn't the best design pattern for Angular, but I just wanted something quick to get my feet wet with the framework.
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>Angular Demo</title>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>{{person.firstName}}</h1>
<p>He lives in {{person.city}}</p>
</div>
<script>
function MyController($scope) {
$scope.person = {
'firstName': 'Adrian',
'city': 'Orlando'
}
}
</script>
</body>
</html>
You are not making Angular aware of your MyController function:
<!doctype html>
<!-- tell Angular what module to use -->
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<title>Angular Demo</title>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>{{person.firstName}}</h1>
<p>He lives in {{person.city}}</p>
</div>
<script>
angular
// Define our module
.module('app', [])
// Define our controller
.controller('MyController', function MyController($scope) {
$scope.person = {
'firstName': 'Adrian',
'city': 'Orlando'
}
});
</script>
</body>
</html>
Get in the habit of assigning app names and controllers to the apps, here:
http://plnkr.co/edit/gfWh6fqWeni8s8M0iG1B?p=preview
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.person = {
'firstName': 'Adrian',
'city': 'Orlando'
}
});
</script>
I am not even trying to be a patronizing ass, but check the tutorial here. It will take you a couple of hours. Then head over to Jenkov's "complete" tutorial.
Your code works fine. I believe your angular source file is the issue try switching it to a CDN src or double check your path
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
http://jsfiddle.net/sfwtfp35/2/
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 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.
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