Angular 自定义指令示例不起作用答案

【问题标题】：Angular custom directive example not workingAngular 自定义指令示例不起作用
【发布时间】：2014-08-25 08:56:52
【问题描述】：

我编写了一个简单的示例自定义角度指令，并在 HTML 中添加了两次该指令。以下是示例。

    <!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>

预期输出：模板文本应该显示两次，因为 rkitem 元素在 HTML 中提到了两次

实际输出：模板文本只显示一次

谁能解释一下为什么它只显示一次而不是两次。

【问题讨论】：

标签： angularjs

【解决方案1】：

您应该在指令元素中添加结束标签：

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

【讨论】：