带有变量动态 angularjs 的文本编辑器

Question

大家好，我想像这个文本编辑器一样制作

带有动态变量 angularjs 但我有任何想法请告诉我指令的名称 Image 谢谢 :D

Answer 1

可能存在针对此的指令，但这里有一个简单的示例：

app.directive("richEditor", function() {
    return {
      restrict: "A",
      scope: {
        variables: "=",
        ngModel: "="
      },
      template: "<div>\
        <textarea ng-model='ngModel'></textarea>\
    <span ng-repeat='variable in variables' ng-click='varSelected(variable)'>{{ variable }}</span>\
    </div>",
      link: function(scope, element, attrs) {
        var textarea = element.find("textarea");
        scope.varSelected = function(variable) {
          if (!scope.ngModel) {
            scope.ngModel = "";
          }
          var position = textarea[0].selectionStart;
          var val = scope.ngModel.substring(0, position) + variable + scope.ngModel.substring(position);
          scope.ngModel = val;
        }
      }
    }
  });

见this jsfiddle

带有变量动态 angularjs 的文本编辑器

text editor with variables dynamic angualrjs

javascript

variables

text-editor

angularjs