Javascript Angular.js自定义指令未多次显示

我有一个Angular.js指令，我正在编写，以减少一些使用Twitter引导的样板文件。到目前为止，我已经创建了一个

表单输入

元素，它按预期显示。但是，如果我将这些指令中的许多指令放在同一父元素中，那么实际上只添加并显示第一个指令

有人能解释一下原因吗

我的标记：

<form class="form-horizontal" role="form">
        <form-input type="text" target="name1" label="Name1" placeholder="Doug" ng-model="name1"/>
        <form-input type="text" target="name2" label="Name2" placeholder="Frank" ng-model="name2"/>
    </form>

app.js

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


app.controller('FormInputController', ['$scope', '$attrs', function($scope, $attrs){
    console.log("Controller");
}]);

app.directive('formInput', function(){
    return {
        restrict: 'E',
        controller: 'FormInputController',
        transclude: true,
        replace: true,
        require: ['^ngModel'],
        template: '<div class="form-group">'
                + '<label for="{{id}}" class="col-sm-2 control-label">{{label}}</label>'
                + '<div class="col-sm-10">'
                  + '<input type="{{type}}" class="form-control" id="{{id}}" placeholder="{{placeholder}}">'
                + '</div>'
              + '</div>',
        scope: {
            id: '@',
            label: '@',
            placeholder: '@',
            type: "@"
        },

        link: function(scope, element, attrs, ctrls) {
            console.log(arguments);
        }
    };
});

var-app=angular.module（'app'，['ui.router']）；
app.controller（'FormInputController'，['$scope'，'$attrs'，函数（$scope，$attrs）{
控制台日志（“控制器”）；
}]);
应用指令（'formInput'，函数（）{
返回{
限制：'E'，
控制器：“FormInputController”，
是的，
替换：正确，
要求：[“^ngModel]”，
模板：“”
+“{{label}}”
+ ''
+ ''
+ ''
+ '',
范围：{
id:“@”，
标签：“@”，
占位符：“@”，
类型：“@”
},
链接：功能（范围、元素、属性、ctrls）{
log（参数）；
}
};
});

如上所述，只显示“Doug”输入

指令不能使用“自动关闭”标记。如果您按以下方式更改您的密码，它应该可以工作：

<form class="form-horizontal" role="form">
    <form-input type="text" target="name1" label="Name1" placeholder="Doug" ng-model="name1"></form-input>
    <form-input type="text" target="name2" label="Name2" placeholder="Frank" ng-model="name2"></form-input>
</form>

基本上，HTML解析

的方式是作为一个打开的标记而不是一个关闭的标记，因此您的第一个指令被启动，但从未完成，这就是为什么第一个指令看起来有效，而第二个指令无效的原因

有关更多详细信息，请参见和

指令不能使用“自动关闭”标记。如果您按以下方式更改您的密码，它应该可以工作：

<form class="form-horizontal" role="form">
    <form-input type="text" target="name1" label="Name1" placeholder="Doug" ng-model="name1"></form-input>
    <form-input type="text" target="name2" label="Name2" placeholder="Frank" ng-model="name2"></form-input>
</form>

基本上，HTML解析

的方式是作为一个打开的标记而不是一个关闭的标记，因此您的第一个指令被启动，但从未完成，这就是为什么第一个指令看起来有效，而第二个指令无效的原因

---

有关更多详细信息，请参见和

标记也给我带来了问题。使用它有什么好处吗？在2016年，通过与我已经拥有的指令的独立范围的对话，仍然是一个有用的答案。谢谢。

标记也给我带来了问题。使用它有什么好处吗？在2016年，通过与我已经拥有的指令的独立范围的对话，仍然是一个有用的答案。谢谢。可能的副本可能的副本