使用angularJS进行标记的自定义指令

Question

I'm not able to add tag in my text field. Can anyone help me with an approach to add text in a text field as tagging. How to bing the tag to a json object or an variable.

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