用AngularJs输入替换文本中的关键字

我开发了一个角度应用程序，我想用'日期'类型的输入替换一些关键字，如'[input-date]'。用AngularJs输入替换文本中的关键字

我尝试使用Regexp替换函数，但不起作用。它显示了我的代码而不是输入。

我能够用ng-bind-html显示输入，但是我不能在ng-model中使用这个值。

<body ng-controller="MainCtrl"> 
    <div ng-bind-html="trustAsHtml(output)"></div> 
    <p>{{inputValue}}</p> 
</body> 


var app = angular.module('plunker', ['ngSanitize']); 

app.controller('MainCtrl', function($scope, $sce) { 
    $scope.trustAsHtml = $sce.trustAsHtml; 
    $scope.foo = 'some text {val}'; 
    var regexValue = new RegExp("{val}", "g"); 
    $scope.output = $scope.foo.replace(regexValue, '<input type="text" name="some_name" ng-model="inputValue" value="">'); 
});

http://plnkr.co/edit/nmML6X7y6poRvY6eY3K5

编辑

我尝试类似的东西

<!doctype html> 
<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-sanitize.js"></script> 
    </head> 
    <body ng-app="plunker"> 
     <div ng-controller="MainCtrl"> 
      <p ><date-input model="output" information="info"></date-input></p> 
     </div> 
     <script> 
      var app = angular.module('plunker', []); 
      app.controller('MainCtrl', ['$scope', function($scope) { 
       $scope.output = 'Johan'; 
       $scope.info = [{ 
       "id": 0, 
       "name": "i'm a name", 
       "type": "text", 
       "message": "Hello, i'm {{value}} and i love cacao" 
       }]; 
      }]).directive('dateInput', function() { 
       return { 
        restrict: 'E', 
        scope: { 
         model: '=model', 
         information: '=information' 
        }, 
        template: function(){ 
        var regexValue = new RegExp("{{value}}", "g"); 
        return information.message.replace(regexValue, '<input type="date" ng-model="model">'); 
        } 
       }; 
      }); 
     </script> 
    </body> 
</html>

但

Error: Can't find variable: information

来源

2014-09-30 Sorcim

在控制器中操作DOM不是一个好主意。 AngularJS有此指令：

<!doctype html> 
 
<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-sanitize.js"></script> 
 
</head> 
 
<body ng-app="plunker"> 
 
    <div ng-controller="MainCtrl"> 
 
     <p><date-input name="info.name" message="info.message"></date-input></p> 
 
    </div> 
 
    <script> 
 
     var app = angular.module('plunker', []); 
 
     app.controller('MainCtrl', ['$scope', function($scope) { 
 
      $scope.info = { 
 
       "id": 0, 
 
       "name": "Kostya", 
 
       "type": "text", 
 
       "message": "Hello, i'm {{name}} and i love cacao" 
 
      }; 
 
     }]).directive('dateInput', ['$compile', function($compile) { 
 
      return { 
 
       restrict: 'E', 
 
       scope: { 
 
        name: '=name', 
 
        message: '=message' 
 
       }, 
 
       template: '<span class="message">{{message}}</span><br>\n\ 
 
          <input type="date" ng-model="name">', 
 
       link: function (scope, element, attrs) { 
 
        scope.info = $compile(element.children('.message'))(scope); 
 
        scope.$watchCollection(['message', 'name'], function(newValues, oldValues, scope) { 
 
         scope.info = $compile(element.children('.message'))(scope); 
 
        }); 
 
       } 
 
      }; 
 
     }]); 
 
    </script> 
 
</body> 
 
</html>

来源

2014-09-30 10:06:57

好吧，我应该使用的指令，但你的例子并不做我想做...是一个指令的例子吗？ – Sorcim 2014-09-30 10:27:35

我的示例用 HTML替换。它具有模型属性，您可以将变量传递给与输入值关联。在输入中键入文本时，可以看到“输出”变量已更改。 – 2014-09-30 11:48:50

我编辑我的主帖。 – Sorcim 2014-09-30 13:55:32

用AngularJs输入替换文本中的关键字

回答

相关问题