在angularjs可编辑的自定义指令中不工作的自定义属性

Question

我刚刚在xeditable中构建了引导输入组新指令，不幸的是，该属性没有按照文档的要求工作。

使用e-*前缀定义的属性自动从原始元素传递到control.For示例，如果设置了<span editable-text="user.name" e-style="width: 100px">，则输入将显示为<input style="width: 100px"> https://vitalets.github.io/angular-xeditable/#ref-element

是否可以在ng-trim="false" ng-change="mytext = mytext.split(' ').join('')"中实现editable-input-group？

​

angular.module('xeditable').directive('editableInputGroup', ['editableDirectiveFactory',
  function(editableDirectiveFactory) {
    return editableDirectiveFactory({
      directiveName: 'editableInputGroup',
      inputTpl: '<div class="form-inline" style="width: 250px"><div class="input-group"><span class="input-group-addon" id="basic-addon1">#</span><input type="text"  class="form-control" placeholder="Name"  ng-model="$data" aria-describedby="basic-addon1" ></div></div>'
    });
  }
]);

(function() {
  var app;
  app = angular.module('app', ['xeditable']);
  app.run(function(editableOptions) {
    return editableOptions.theme = 'bs3';
  });
  app.controller('Ctrl', function($scope, $filter) {
    return $scope.user = {
      name: 'fun'
    };
  });
}.call(this));

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap-tpls.min.js"></script>
 <link rel="stylesheet" type="text/css" href="//vitalets.github.io/angular-xeditable/dist/css/xeditable.css"/>
<script src="//vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>

<div ng-app="app" ng-controller="Ctrl" style="margin: 50px" class="container">
  <h4>Angular-xeditable demo</h4>
  <br /> My hash tag:
  <a href="#" editable-input-group="user.name" e-ng-trim="false"  e-ng-change="$data = $data.split(' ').join('')">{{ user.name || 'empty' }}</a>
  <br>
  <br> debug: {{ user | json }}
  <hr />
  <h3>No space allowed</h3>
  <input type="text" ng-trim="false" ng-change="mytext = mytext.split(' ').join('')" ng-model="mytext"/>
</div>

​

Answer 1

我想你可以写个指令

app.directive('parse', function() {
    return {
        restrict : 'A',
        require : 'ngModel',
         link: function(scope, elem, attrs, ctrl) {           
            ctrl.$parsers.push(function(value) {
                  var result =  value.split(' ').join('')
                  return result               
            });
         }
    }
})

这是一个示例