var app = angular.module('app',[]);
app.controller('appController',function($scope){});
app.directive('circleTag',function(){return{
restrict:'E',
template:'<div class="circle">circle</div>'};});
var app = angular.module('app', []);
app.controller('appController', function ($scope) {
});
app.directive('circleTag', function () {
return {
restrict: 'E',
template: '<div class="circle">circle</div>'
};
});
AngularJS attribute directive example:
html:
<section ng-app="app"class="container"><section ng-controller="appController"><divclass="target" enter leave="good bye">hover over me</div></section></section>
<section ng-app="app" class="container">
<section ng-controller="appController">
<div class="target" enter leave="good bye">hover over me</div>
</section>
</section>
var app = angular.module('app',[]);
app.controller('appController',function($scope){});
app.directive('classDirective',function(){return{
restrict:'C',
transclude:true,
template:'<div class="target">classDirective example - <span ng-transclude></span></div>'};});
var app = angular.module('app', []);
app.controller('appController', function ($scope) {});
app.directive('classDirective', function () {
return {
restrict: 'C',
transclude: true,
template: '<div class="target">classDirective example - <span ng-transclude></span></div>'
};
});
html:
<section ng-app="app"><div ng-controller="appController">
click on items in the list:
<custom-list></custom-list></div></section>
<section ng-app="app">
<div ng-controller="appController">
click on items in the list:
<custom-list></custom-list>
</div>
</section>
js:
var app = angular.module('app',[]);
app.directive('customList',function(){return{
restrict:'E',
replace:true,
template:'<ul><li ng-repeat="item in items">'+'<a href="#" ng-click="viewDetails(item)">{{item.title}}</a>'+'</li></ul>',
link:function(scope){// same as 'controller'
scope.viewDetails=function(item, element){
console.log('clicked on '+ item.title);
alert('clicked on '+ item.title);}},/*controller: function ($scope) { // same as 'link'
$scope.viewDetails = function (item) {
console.log('clicked on ' + item.title);
alert('clicked on ' + item.title);
}
},*/}});
app.controller('appController',function($scope){
$scope.items=[{
title:'orange'},{
title:'lime'},{
title:'pineapple'}];});
var app = angular.module('app', []);
app.directive('customList', function () {
return {
restrict: 'E',
replace: true,
template: '<ul><li ng-repeat="item in items">' +
'<a href="#" ng-click="viewDetails(item)">{{item.title}}</a>' +
'</li></ul>',
link: function (scope) { // same as 'controller'
scope.viewDetails = function (item, element) {
console.log('clicked on ' + item.title);
alert('clicked on ' + item.title);
}
},
/*controller: function ($scope) { // same as 'link'
$scope.viewDetails = function (item) {
console.log('clicked on ' + item.title);
alert('clicked on ' + item.title);
}
},*/
}
});
app.controller('appController', function ($scope) {
$scope.items = [{
title: 'orange'
}, {
title: 'lime'
}, {
title: 'pineapple'
}];
});
The directive is sharing scope with its parent controller.
directive inherited scope
var app = angular.module('app',[]);
app.directive('customList',function(){return{
restrict:'E',
replace:true,
scope:true,
template:'<ul><li ng-repeat="item in items">{{item.title}}</li></ul>'}});
app.controller('appController',function($scope){
$scope.items=[{
title:'orange'},{
title:'lime'},{
title:'pineapple'}];});