如何在指令模板中使用标签输入？答案

【问题标题】：How to use tags-input inside the directive template?如何在指令模板中使用标签输入？
【发布时间】：2016-05-23 02:08:22
【问题描述】：

我想在指令模板中使用标签输入。在以下示例中，我们在指令模板中使用输入文本框，我想使用tags-input，而不是输入框。请参阅以下代码，指令模板内部我正在使用Here Use tags-input: <input type="text" ng-model="modeldisplay" ></input>，我想在这里使用标签输入：

为此包括以下库

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

Plunker Demo:

// 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: <input type="text" ng-model="modeldisplay" ></input>',
    require: 'ngModel',
    scope : {
      items : "=",
      modeldisplay:'= modeldisplay'
    },
    link : function(scope, element, attrs, ctrl){
      scope.updateModel = function(item)
      {
        ctrl.$setViewValue(item);
        scope.modeldisplay = item;
      }
    }
  };
});

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

});

【问题讨论】：

标签： javascript html angularjs angular-ui-bootstrap

【解决方案1】：

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

对代码进行以下更改：
1.将scope.modeldisplay = item;替换为scope.modeldisplay.push({"text":item});

// 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;
  };

});

Demo

【讨论】：

感谢您的解决方案，但是有一个问题，当您多次选择任何数字时，它会在控制台中给出错误Error: ngRepeat:dupes Duplicate Key in Repeater。它试图通过track by $index 解决它，但徒劳无功。
如果项目已经在数组中，您可以在推送之前设置条件。 Updated Plunker

【解决方案2】：

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

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

其次，您没有将 ngInputTags 注入到您的模块中。

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

执行这些操作，然后在模板中包含标签：得到结果。

【讨论】：