I'm not sure if its because I'm trying to use a directive inside a partial but I cannot get a simple directive element click event to fire.
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<tabbed-Panel1 class="bottomTabPanel">
TEST CLICK HERE!
</tabbed-Panel1>
</body>
</html>
js: DIRECTIVE
angular.module('directives', ['basemodule'])
.directive('tabbedPanel1',function() {
debugger;
restrict:"E",
return {
link: function(scope, elem, attr) {
elem.bind('click', function() {
//never gets here!
debugger;
});
}
};
});
Ok, part of the issue was formatting of tabbedPanel1 for in-markup use. So in the HTML it had to be: tabbed-Panel1
The issue regarding the click event was solved by adding: restrict:"E"
Related
I am using angular universal.
This is the main url : https://domain-name.com/articles/some-article-slug-here
When this url is opened then res.render('index') is called and it causes to render the index.html file as shown in the code below.
app.get('*', (req, res) => {
res.render('index', { req });
});
Content of index.html is shown below:
<!doctype html>
<html lang="en">
<head >
......some head data here.....
</head>
<body>
......some body data here......
</body>
</html>
I want that when url : https://domain-name.com/amp/articles/some-article-slug-here is opened then replace the whole content inside html tag with some another html as shown below:
<!doctype html>
<html amp lang="en">
<head >
......some another head data here.....
</head>
<body>
......some another body data here......
</body>
</html>
Use Angular routing, you are saying: "I need a SPA with Angular!"
https://angular.io/guide/router
I would want to create an tag with target attribute set to blank, but without actually moving me to the opened page, but rather staying on the page it was opened on.
I hope this helps.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style></style>
</head>
<body>
<a href="https://google.com/" trueblank="true" >Click Me</a>
<script>
var links = document.querySelectorAll("a");
links.forEach(function(each) {
each.onclick = function(ev) {
if(this.getAttribute("trueblank") == "true") {
ev.preventDefault();
window.open(this.href);
}
}
});
</script>
</body>
</html>
following JS code below opens a new window on your current window and user remains on the first page yet
window.open("https://www.w3schools.com", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");
I'm trying to define a directive and a module in Angular.js as follows (venue-map.js):
(function(){
var app = angular.module('venues', []);
app.directive('venueInfo', function(){
return{
restrict: 'E',
templateUrl: "venue-info.html"
};
});
})();
where venue-info.html only contains a <p> element:
<p>WHY OH WHY</p>
However, when I try to invoke it on my HTML like this:
<venueInfo></venueInfo>
nothing appears on the screen. I believe I'm correctly importing both angular.js and my module script. This is my complete index.html:
<!DOCTYPE html>
<html ng-app="venues">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script type="text/javascript" src="venue-map.js"></script>
</head>
<body>
<venueInfo></venueInfo>
</body>
</html>
Use <venue-info> instead of <venueInfo>.
In Angular, you're supposed to use camelcase in js, but hyphenation in html.
Use the following code :
app.directive('venueInfo', function(){
return{
restrict: 'E',
templateUrl: "venue-info.html",
transclude: true
};
});
I am trying to learn about angular Directives and following the example given in here (http://docs.angularjs.org/guide/directive), have written the below code. Could anyone please guide me as what am i doing wrong that the data from the scope of the controller is not being read in the directive? The site says nothing about it! And there is no error upon executing the code, it just does not display any data. Please help.
//My Html
<!DOCTYPE html>
<html data-ng-app="MyApp">
<head>
<title>Angular Directives</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body >
<div data-ng-controller = "MyCtrl"></div>
<div data-template-expanding-directive></div>
<script src="lib/angular.js"></script>
<script src="js/templateExpandingDirective.js"></script>
</body>
</html>
//My JS
'use strict';
var myapp = angular.module('MyApp',[]);
myapp.controller('MyCtrl',['$scope',function($scope){
$scope.customer = {
name: "Jenny",
place: "England"
};
}])
.directive('templateExpandingDirective',function(){
return {
template: 'Name: {{customer.name}}'
};
});
Regards
The directive is currently out of controller scope. So you need to have directive inside the controller scope. The html should be like this -
<div data-ng-controller = "MyCtrl">
<div data-template-expanding-directive></div>
</div>
If you do not move the directive element inside the controller div element then you can either have one more parent 'div' element or access the data from global root scope.
My onload function is not working for IE7 and 8:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
function onload()
{
alert("Working properly")
}
</script>
</head>
<body>
</body>
</html>
The alert doesn't happen if I try to access it with IE7 or 8 but it's working properly in Mozilla.
Can anyone suggest something which works for both IE and Mozilla?
This works only for IE.
Instead
function onload() {
alert("Working properly")
}
try this..
function window.onload() {
alert("Working properly")
}
EDIT:
Common approach for both browsers
function onload() {
alert("Working properly")
}
var browserName=navigator.appName;
if(browserName=="Microsoft Internet Explorer")
{
window.onload=onload;
}
else
{
if (document.addEventListener)
{
document.addEventListener("DOMContentLoaded", onload, false);
}
}
Use a toolkit like JQuery or Mootools, which will take care entirely of these details for you.
In JQuery, you add the link to the jquery.js, then this would look like:
$(function() { alert("Working properly"); });