angularJS kullanarak etiketleme için özel yönlendirme

Question

Metin alanımda etiket ekleyemiyorum. Etiketleme olarak bir metin alanına metin ekleme yaklaşımı olan herkes bana yardımcı olabilir. Etiketin bir json nesnesine veya değişkenine nasıl yapıştırılacağı.

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