(function () {

​

    var app = angular.module('app', []);

​

    app.directive('customInclude', function () {

        return {

            restrict: 'E',

            scope: {

                type: '@'

            },

            link: function ($scope, $elem, $attr) {

                var prefix = $attr.prefix || '',

                    suffix = $attr.suffix || '';

                $scope.step = function (s) {

                    console.log('step', prefix, s, suffix);

                    return prefix + s + suffix;

                };

            },

            template: function (elem, attr) {

                return `<h2>Fusce lorem ante</h2>

<ul>

    <li check-step="{{step(1)}}">Vestibulum efficitur</li>

    <li check-step="{{step(2)}}">Arcu vitae iaculis sodales</li>

    <li check-step="{{step(3)}}">Ligula ex interdum neque</li>

    <li check-step="{{step(4)}}">Ac iaculis felis lectus in purus.</li>

</ul>

`;

            }

        };

    });

​

    app.directive('checkStep', function () {

        return {

            restrict: 'A',

            scope: {

                name: '@checkStep'

            },

            link: function ($scope, $elem, $attr) {

                console.log('link', $scope.name);

            }

        };

    });

​

})();

​