I have 2 things to do:
custom directive for dropdowns
custom directive for upload
var app=angular.module('app.directives', []);
app.directive('dropdowns', function() {alert("dropdown directive");
return {
restrict: 'AE',
templateUrl: 'html/uploadFile.html'
};
});
app.directive('uploadDir', function() {
alert("upload directive");
return {
restrict : 'AE',
templateUrl : 'html/dropdowns.html'
};
});
The directive for dropdown is working
But the directive for upload is not working(the alert message in uploadDir directive is not getting displayed)
Is the syntax correct?
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="ISO-8859-1">
<title>upload using directive</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="lib/ui-bootstrap-tpls-0.13.0.js"></script>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"/>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/controllers.js"></script>
<script type="text/javascript" src="js/services/services.js"></script>
<script type="text/javascript" src="js/directives/directives.js"></script>
</head>
<body>
<div>
<div dropdowns></div>
<div uploadDir></div>
</div>
</body>
</html>
Use <div upload-dir></div>. Directive names in camel case are normalised with dashes when matching against HTML elements.
Related
I'm having some problems when I tried to open a calendar using jquery ui thru NgRoute Angularjs. I've tried removing ng-view tag and it works fine. i need it working with NgRoute.
index.html
<!DOCTYPE html>
<html ng-app="mainApp">
<head lang="en">
<title>AngularJS Routing</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<li> Date Picker </li>
<div ng-app="mainApp">
<ng-view></ng-view>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
main.jsp
(function() {
"use strict";
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(function($routeProvider) {
$routeProvider
.when('/datePicker', {
templateUrl: 'DatePicker.html',
controller: 'DemoCtrl'
})
.otherwise({
redirectTo: '/index'
});
});
mainApp.controller('DemoCtrl', ['$scope', '$http', function ($scope, $http) {
//$('#datepicker1').datepicker();
}]);
})();
DatePicker.html
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="main.js"></script>
<script>
$(function() {
$( "#datepicker1" ).datepicker();
});
</script>
</head>
<body>
<form>
<p>Fecha: <input id="datepicker1" type="text" ></p>
Main menu
</form>
</body>
</html>
http://plnkr.co/edit/Wk4zZo0WfoypMmaMgv4j
I will appreciate any help on this issue.
Thank you so much,
Ariel.
in DatePicker.html you dont need all tags again only the ones that will go inside ng-view:
<script>
$(function() {
$( "#datepicker1" ).datepicker();
});
</script>
<form>
<p>Fecha: <input id="datepicker1" type="text" ></p>
Main menu
</form>
And this will go inside index.html:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="main.js"></script>
I dont know if it will sove your problem, but it is the correct thing to do...
I have just started learning Angular and trying to print some text through angular custom directive. but nothing is getting print. Please help me out. Here is the index.html and script.js file.
angular.module('main', [])
.controller('mainCtrl', function ($scope) {
$scope.name = "firoz";
})
.directive('myDir', function () {
return {
restrict : 'E',
template: '<div>Trying to print this text</div>'
};
});
<!DOCTYPE html>
<html ng-app="main">
<head>
<script data-require="angular.js#1.3.17" data-semver="1.3.17" src="https://code.angularjs.org/1.3.17/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl">
<mydir></mydir>
</body>
</html>
Here is the Plunker link : http://plnkr.co/edit/ub9Ch34OtckzQuCI9sDk?p=preview
You need to hyphenate anywhere that has a capital when used in the directive, like:
<my-dir></my-dir>
The correct Angular syntax is:
<my-dir></my-dir>
angular.module('main', [])
.controller('mainCtrl', function ($scope) {
$scope.name = "firoz";
})
.directive('myDir', function () {
return {
restrict : 'E',
template: '<div>Trying to print this text</div>'
};
});
<!DOCTYPE html>
<html ng-app="main">
<head>
<script data-require="angular.js#1.3.17" data-semver="1.3.17" src="https://code.angularjs.org/1.3.17/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl">
<my-dir></my-dir>
</body>
</html>
Is there any way to run an angularjs script when datepicker onSelect method called?
Thanks
Yes, of course it is possible. You could instantiate the datepicker inside the controller.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="jquery-ui.css">
</head>
<body ng-app="DatePickerModule">
<div ng-controller="DatePickerController">
<input id="dateField" />
</div>
</body>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script type="text/javascript">
angular.module('DatePickerModule', [])
.controller('DatePickerController', function() {
$('#dateField').datepicker();
});
</script>
</html>
EDIT:
If you would like to use a directive:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="jquery-ui.css">
</head>
<body ng-app="DatePickerApp">
<div>
<input id="dateField" myDirective />
</div>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script type="text/javascript">
angular.module('DatePickerApp', [])
.directive('mydirective', function() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
$(function(){
element.datepicker({
onSelect: function() {
alert("Selected");
}
});
});
}
}
});
</script>
</html>
Why is that when I run my Angular app, I don't get directive running?
Example code:
var app = angular.module("app",['mgcrea.ngStrap','layout.menu']);
app.controller('MainController', ['$scope','$timeout', function($scope,$timeout){
$timeout(function(){console.log("ready")});
}]);
var menu = angular.module('layout.menu', [])
.controller('MenuController', ['$scope', function($scope){
console.log("controller");
}])
.directive('menuDir', ['$window', function($window){
console.log("directive");
return function (scope, element) {
console.log("return directive");
};
}]);
HTML:
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="assets/libs/bootstrap/dist/css/bootstrap.min.css">
<script src="assets/libs/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="assets/libs/angular/angular.js"></script>
<script type="text/javascript" src="assets/libs/angular-strap/dist/angular-strap.js"></script>
<script src="assets/libs/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="MainController">
<div class="list-group mainmenu" id="mainmenu" ng-controller="MenuController"></div>
</body>
</html>
When I run the app, I get the controller output, but no output from directive. Why? How can I fix it?
Directives/Services/Factories in angularJs are lazily instantiated.
They will be processed only when we use them.
Use the menuDir directive in your markup, then you will see the console statement written inside your directive.
I am trying to learn AngularJS. I have a navigation setup as a view and I cannot get it to display. When I look in the inspector i see <!-- ngInclude: views/nav.html -->.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>The ToDo List</title>
<script type="text/javascript" src="assets/js/lib/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<script type="text/javascript" src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
<script type="text/javascript" src="assets/js/lib/angular-route.min.js"></script>
<script type="text/javascript" src="assets/js/lib/angular-animate.min.js"></script>
<script type="text/javascript" src="assets/js/app.js"></script>
<script type="text/javascript" src="assets/js/controllers/activetaskscontoller.js"></script>
</head>
<body>
<div class="navigation" ng-include="views/nav.html"></div>
Here is my app.js
var myApp = angular.module('myApp',
['ngRoute', 'firebase', 'appControllers']);
var appControllers = angular.module('appControllers', ['firebase']);
myApp.config(['$routeProvider',function($routeProvider) {
$routeProvider.
when('/active-tasks', {
templareUrl: 'views/active-tasks.html',
controller: 'ActiveTasksController',
}).
when('/completed-tasks', {
templareUrl: 'views/completed-tasks.html',
controller: 'CompletedTasksController',
}).
otherwise({
redirectTo: '/active-tasks'
});
}]);
ng-include is expecting a string and not a path.
Try changing to this:
<div class="navigation" ng-include="'views/nav.html'"></div>
You can read more about the subject here: AngularJS ng-include does not include view unless passed in $scope