Question

我编写了一个简单的示例自定义角度指令，并在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>

预期输出：模板文字应显示两次，因为HTML中提到的 rkitem 元素两次

实际输出：模板文字仅显示一次

任何人都可以解释为什么它只显示一次而不是两次。

Answer 1

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

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

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

1 个答案: