AngularJS directive

<custom-directive="customExpression"></custom-directive>
 
<div custom-directive="customExpression"></div>
 
<div class="custom-directive:customExpression"></div>
 
<!-- directive: custom-directive customExpression -->

<section ng-app="app" class="container">
    <section ng-controller="appController">
        <circle-tag></circle-tag>
    </section>
</section>

var app = angular.module('app', []);
 
app.controller('appController', function ($scope) {
 
});
 
app.directive('circleTag', function () {
    return {
        restrict: 'E',
        template: '<div class="circle">circle</div>'
    };
});

<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('enter', function () {
    return {
        restrict: 'A',
        link: function(scope, element){
            element.bind('mouseenter', function() {
                element.html('mouseenter');
            })
        }
    };
});
 
app.directive('leave', function () {
    return {
        restrict: 'A',
        link: function(scope, element, atts){
            element.bind('mouseleave', function() {
                element.html(atts.leave);
            })
        }
    };
});

<section ng-app="app" class="container">
    <section ng-controller="appController">
        <div class="not-target classDirective">text</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>'
    };
});

<section ng-app="app">
    <div ng-controller="appController">
        click on items in the list:
        <custom-list></custom-list>
    </div>
</section>

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,
        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'
    }];
});

var app = angular.module('app', []);
 
app.directive('customList', function () {
    return {
        restrict: 'E',
        replace: true,
        scope: {
                itemsList: '=' // 2-way data binding
        },
        //scope: {}, // fully isolated scope
        // in html directive param <div items-list="itemsList"></div>
        template: '<ul><li ng-repeat="item in items">{{item.title}}</li></ul>'
    }
});
 
app.controller('appController', function ($scope) {
    $scope.itemsList = [{
        title: 'orange'
    }, {
        title: 'lime'
    }, {
        title: 'pineapple'
    }];
});