javascript - Custom attribute not working in custom directive of angularjs xeditable -
i have build bootstrap input group new directive in xeditable unfortunately attribute not working per documentation
attributes defined e-*
prefix automatically transfered original element control.for example, if set <span editable-text="user.name" e-style="width: 100px">
input appear <input style="width: 100px">
👉 https://vitalets.github.io/angular-xeditable/#ref-element
is possible implement ng-trim="false" ng-change="mytext = mytext.split(' ').join('')"
in 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 /> 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>
i think can write directive this
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 }); } } })
here example
Comments
Post a Comment