Javascript 如何使用指令模板内输入的标记？

我想在指令模板中使用标记输入。在下面的示例中，我们使用指令模板中的输入文本框，我想使用

标记input

，而不是input box。请参阅指令模板内的以下代码 我正在使用

此处使用标记输入：

，我想在此处使用标记输入：

为此，包括以下库

 <script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>

//代码在这里
var-app=angular.module（“myApp”，['ngTagsInput']）；
app.directive（“myDirective”，function（））{
返回{
限制：“E”，
模板：“单击以选择！{{item}”+
'此处使用标记输入：'，
要求：'ngModel'，
范围：{
项目：“=”，
modeldisplay:'=modeldisplay'
},
链接：函数（范围、元素、属性、ctrl）{
scope.updateModel=函数（项）
{
ctrl.$setViewValue（项目）；
scope.modeldisplay=项目；
}
}
};
});
app.controller（“appCtrl”，函数（$scope）{
$scope.items=[1,2,3,4,5,6]；
$scope.bar=函数（foo）{
$scope.aux=foo；
}
});

首先确保您正在导入ngInputTags脚本：

<script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>

执行以下操作，然后将标记包括在模板中：

---

获取结果。

在html中添加css和js：

<link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" />
<script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>

---

感谢您的解决方案，但有一个问题，当您多次选择任何数字时，它会在控制台中发出错误

错误：ngRepeat:dupes replicate Key in Repeater

。它试图通过，

track by$index

来解决这个问题，但没有成功。如果项目已经在数组中，您可以在推送它之前设置一个条件。

var app = angular.module("myApp", ['ngTagsInput']);

<link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" />
<script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>

// Code goes here
var app = angular.module("myApp", ['ngTagsInput']);

app.directive("myDirective", function(){
  return {
    restrict: "E",
    template : '<h1>Click to choose!</h1><div class="clkm"'+
    'ng-repeat="item in items" ng-click="updateModel(item)">{{item}}</div>' +
    'Here Use tag-input: <tags-input ng-model="modeldisplay" ></tags-input>',
    require: 'ngModel',
    scope : {
      items : "=",
      modeldisplay: "="
    },
    link : function(scope, element, attrs, ctrl){
      scope.updateModel = function(item)
      {
        ctrl.$setViewValue(item);
        scope.modeldisplay.push({"text":item});
      }
    }
  };
});

app.controller("appCtrl", function($scope){ 
  $scope.items = [1,2,3,4,5,6];
  $scope.tags = [];
  $scope.bar = function(foo)  {
    $scope.aux = foo;
  };

});