Javascript 使用angularJS标记的自定义指令

我无法在文本字段中添加标记。有人能帮我在文本字段中添加文本作为标记吗。如何将标签绑定到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>

var-app=angular.module（'myApp'，[]）；
应用程序指令（'tagInputType'，函数（）{
返回{
限制：'E'，
作用域：{tags:'='}，
模板：
'' +
“{{tag}}”+
'' +
' ' +
'',
链接：函数（$scope$element）{
//var输入=angular.element（$element.children（）[1]）；
$scope.add=函数（）{
$scope.tags.push（$scope.new_值）；
$scope.new_value=“”；
};
$scope.remove=函数（idx）{
$scope.tags.splice（idx，1）；
};
input.bind（'keypress'，函数（事件）{
如果（event.keyCode==13）{
$scope.$apply（$scope.add）；
}
});
}
};
});
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.tags={“value1”：“angular”，“value2”：“html”}；
});

App.directive（'dhTag'，函数（$compile）{
返回{
限制：“AE”，
范围：{
标记列表：'=列表'，
自动完成：'=自动完成'，
显示：'='
},
链接：函数（$scope，element，attrs）{
$scope.defaultWidth=490；
$scope.tagText=“”；
$scope.placeholder=attrs.placeholder；
$scope.display=attrs.display；
$scope.tagArray=函数（）{
返回$scope.taglist | |[]；
};
$scope.addTag=函数（）{
//调试器
向量阵列；
如果（$scope.tagText.length==0）{
返回；
}
tagArray=$scope.tagArray（）；
对于（var i=0；i0&&$scope.tagText.length==0&&key==undefined）{
tagArray.pop（）；
}否则{
如果（键！==未定义）{
tagArray.拼接（图例1）；
}
}
$scope.taglist=tagArray；
};
$scope.$watch（'tagText'，函数（newVal，oldVal）{
无功温度；
如果（！（newVal==oldVal&&newVal==未定义）&&temp）{
//temp=$（“”+newVal+“”）。附加到（“正文”）；
$scope.inputWidth=temp？temp.width（）：0；
如果（$scope.inputWidth<$scope.defaultWidth）{
$scope.inputWidth=$scope.defaultWidth；
}
返回温度移除（）；
}
});
$scope.processKey=函数（e）{
var键；
key=e.which；
如果（键===9 | |键===13 | |键===188）{
$（“div”）.find（'.dh tag ctn.input tag'）.css({
“背景色”：“#FCF8E3”
});
e、 预防默认值（）；
返回$scope.addTag（）；
}
如果（键===8）{
$（“div”）.find（'.dh tag ctn.input tag'）.css({
背景色：“rgba（255,0,0,0.15）”
});
$scope.deleteTag（）；
}
};
},
//templateUrl:“tagInputTemplate.html”，
模板：“”+
"" +
"   " +
“{{tag.name}}”+
“&次；”+
"   " +
"   " +
"" +
“
”+
“{{tag.name}}”+
“×；
”+
""
};
});

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