angleJSを使用したタグ付けのカスタムディレクティブ

Question

テキストフィールドにタグを追加できません。テキストフィールドにテキストをタグ付けするアプローチを教えてもらえますか？タグをjsonオブジェクトまたは変数にバインドする方法。

</script> 
    <script> 
     var app = angular.module('myApp',[]); 

    app.directive('tagInputType', function() { 
     return { 
      restrict: 'E', 
      scope: { tags: '=' }, 
      template: 
       '<div class="tags">' + 
        '<a ng-repeat="(idx, tag) in tags" class="tag" ng-click="remove(idx)">{{tag}}</a>' + 
       '</div>' + 
       '<input type="text" placeholder="Add a tag..." ng-model="new_value"></input> ' + 
       '<input type="button" value="Add" ng-click="add()"></input>', 
      link: function ($scope, $element) { 
       // var input = angular.element($element.children()[1]); 

       $scope.add = function() { 
        $scope.tags.push($scope.new_value); 
        $scope.new_value = ""; 
       }; 

       $scope.remove = function (idx) { 
        $scope.tags.splice(idx, 1); 
       }; 

       input.bind('keypress', function (event) { 

        if (event.keyCode == 13) { 

         $scope.$apply($scope.add); 
        } 
       }); 
      } 
     }; 
    }); 

    app.controller('MainCtrl', function ($scope) { 
     $scope.tags = { "value1":"angular","value2":"html"}; 
    }); 
    </script> 

Answer 1

<script> 
    App.directive('dhTag', function($compile) { 
    return { 

     restrict: 'AE', 
     scope: { 
     taglist: '=list', 
     autocomplete: '=autocomplete', 
     display: '=' 
     }, 
     link: function($scope, element, attrs) { 

     $scope.defaultWidth = 490; 
     $scope.tagText = ""; 
     $scope.placeholder = attrs.placeholder; 
     $scope.display = attrs.display; 



     $scope.tagArray = function() { 
      return $scope.taglist || []; 
     }; 


     $scope.addTag = function() { 
      //debugger 
      var tagArray; 
      if ($scope.tagText.length === 0) { 
      return; 
      } 
      tagArray = $scope.tagArray(); 

      for (var i = 0; i < tagArray.length; i++) { 
      if (tagArray[i].name == $scope.tagText) { 
       alert("Tag already exists in the content box!!"); 
       return; 
      } 
      } 

      tagArray.push({ 
      name: $scope.tagText 
      }); 
      $scope.taglist = tagArray; 
      $scope.tagText = ""; 
     }; 


    $scope.deleteTag = function(key) { 
     var tagArray; 
     tagArray = $scope.tagArray(); 
     if (tagArray.length > 0 && $scope.tagText.length === 0 && key === undefined) { 
     tagArray.pop(); 
     } else { 
     if (key !== undefined) { 
      tagArray.splice(key, 1); 
     } 
     } 
     $scope.taglist = tagArray; 
    }; 



    $scope.$watch('tagText', function(newVal, oldVal) { 
     var temp; 
     if (!(newVal === oldVal && newVal === undefined) && temp) { 
     //temp = $("<span>" + newVal + "</span>").appendTo("body"); 
     $scope.inputWidth = temp ? temp.width() : 0; 
     if ($scope.inputWidth < $scope.defaultWidth) { 
      $scope.inputWidth = $scope.defaultWidth; 
     } 
     return temp.remove(); 
     } 
    }); 

    $scope.processKey = function(e) { 
     var key; 
     key = e.which; 
     if (key === 9 || key === 13 || key === 188) { 
     $("div").find('.dh-tag-ctn .input-tag').css({ 
      "background-color": " #FCF8E3" 
     }); 
     e.preventDefault(); 
     return $scope.addTag(); 
     } 
     if (key === 8) { 
     $("div").find('.dh-tag-ctn .input-tag').css({ 
      "background-color": "rgba(255, 0, 0, 0.15)" 
     }); 
     $scope.deleteTag(); 
     } 
    }; 
    }, 
    //templateUrl: "tagInputTemplate.html", 
    template: "" + 
    "<div class='dh-tag-ctn'>" + 
    " <div class='input-tag' ng-hide={{display}} data-ng-repeat=\"tag in tagArray() track by $index\" ng-class='tag' >" + 
    "  <span>{{tag.name}}</span>" + 
    "  <div class='delete-tag' data-ng-click='deleteTag($index)'>&nbsp;&times;</div>" + 
    " </div>" + 
    " <input type='text' data-ng-style='{width: inputWidth}' ng-model='tagText' ng-keypress='processKey($event)' ng-keyup='processKey($event)' placeholder='{{placeholder}}' />" + 
    "</div>" + 
    "<br>" + 
    "<div ng-show={{display}} class='dh-tag-ctn-view'><div class='input-tag' data-ng-repeat=\"tag in tagArray() track by $index\" ng-class='tag'>{{tag.name}}" + 
    " <div class='delete-tag' data-ng-click='deleteTag($index)'>&times;<br></div>" + 
    "</div>" 
    }; 
    }); 
</script>