CODEWITHSUNDEEP
angularjs
refactor
refactor

Reputation: 15034

Angular custom directive example not working

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.

Upvotes: 1

Views: 130

Answers (1)

Catalin MUNTEANU
Catalin MUNTEANU

Reputation: 5634

You should add closing tags to your directive elements:

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

Upvotes: 4

Related Questions