Angular custom directive example not working

Question

I have written a simple sample custom angular directive and added the directive twice in the HTML. Below is the sample.

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <link href="Content/bootstrap.css" rel="stylesheet" />

    <script>

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

        myDirectives.directive('rkitem', function () {

            return {

                restrict: 'E',
                template: '<h4> template text </h4>'
            }
        });


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

        var ctrl = function ($scope) {
            $scope.fname = 'test';
        }

        myApp.controller('ctrl', ctrl);


    </script>
</head>
<body ng-app="myApp">
    <div class="container" ng-controller="ctrl">
        <div class="row">
            <rkitem />  
            <rkitem />          
        </div>        
    </div>
</body>
</html>

Expected Output : template text should be displayed twice as rkitem element mentioned twice in HTML

Acutal Output : template text is getting displayed only once

Can anyone please explain why it is getting displayed only once and not twice.

Catalin MUNTEANU · Accepted Answer · 2014-08-25 09:02:03Z

4

You should add closing tags to your directive elements:

<div class="row">
     <rkitem></rkitem>  
     <rkitem></rkitem>      
</div>

answered Aug 25, 2014 at 9:02

Catalin MUNTEANU

5,6442 gold badges37 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular custom directive example not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related