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
};
});
Related
I am trying to test angular v1.6.2 components and ui-router together but can't get it to work. Here is my
html:
<!DOCTYPE html>
<html lang="en" ng-app="rrrwamac">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <test></test> -->
<ui-view></ui-view>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script src="index.js"></script>
<script src="test.js"></script>
</body>
</html>
component:
angular.module('rrrwamac').component('test', {
template: '<h3>Its the UI-Router<br>testing..!</h3>'
})
and config:
var app = angular.module('rrrwamac', ['ui.router']);
app.config(function($stateProvider) {
$stateProvider
.state('test', {
url: '',
component: 'test'
});
});
NOTE: When I place component tag
<test></test>
everything works, but when I try using ui-router and ui-view it doesn't.
I am also using live-server that places an extra script into my html and connects to http://127.0.0.1:8080/.
Any help greatly appreciated. Thanx.
I am trying to insert a view in my index.html using $routeProvider and ng-view from Angularjs libraries. Can anyone help figure out why it is not getting inserted?
Here are my index.html, my views, and my app.js files:
index.html:
<!doctype html>
<html lang='en' ng-app="myApp">
<head>
<script src="app/lib/angular.min.js"></script>
<script src="app/lib/angular-route.min.js"></script>
<script src="app/lib/app.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main ng-view>
</main>
</body>
</html>
app.js:
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/login', {
templateUrl: 'views/login.html'
})
.otherwise({
redirectTo: '/login'
});
}]);
my login.html (which is in the views folder of my project):
<h1>Welcome to the login page!</h1>
When I try and preview this page in atom the index.html is empty. Any idea what is going wrong?
Hopefully You're running your application on some server.Because the same code is working fine for me.
app.js file
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/login', {
template: '<h1>Welcome to the login page!</h1>'
})
.otherwise({
redirectTo: '/login'
});
}]);
Click here for working plunker.
I am working on a angular directive POC. Here I have an HTML page and a controller class. I have method in my typescript class that returns a directive. Also I have a placeholder for this directive in the HTML page. How can I link these two.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TypeScript HTML App</title>
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="scripts/angular.js"></script>
<script data-main="main" src="scripts/require.js" type="text/javascript"></script>
</head>
<body ng-controller="TypeScriptController as TSCtrl">
<helloworld> </helloworld>
</body>
</html>
/////controller class
export class TypeScriptController {
name: string;
place: string;
output: string;
text: string;
helloworld: ng.IDirective;
protected ngModule: ng.IModule = null;
constructor() {
this.name = "Obama";
this.place = "America";
this.text = "welcome";
this.helloworld = this.getCustomDirective();
//how can link this helloworld directive to the html
}
getCustomDirective(): ng.IDirective {
return {
restrict: 'E',
replace: true,
controller: [TypeScriptController],
controllerAs: "TSCtrl",
//templateUrl: "first.html"
template: '<h1>{{TSCtrl.place}}</h1>'
};
}
}
angular.element(document).ready(() => {
var main: TypeScriptController = new TypeScriptController();
});
How can I link the helloworld directive the html. I don't have a "ng-app" name to do something like..
angular.module('myApp').directive('myDirective', myDirective);
I want to register the directive from inside the class not outside it..I want to create module or something similar inside the class and then use it to register the directive.
How can I link these two.
Not without creating an angular.module. Controllers are looked up from window but directive's are not. Also if you don't have an ng-app (or bootstrap) then Angular will not do directive tag -> directive transform for that section of html.
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.
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"