用AngularJs通过输入替换文本中的关键字答案

【问题标题】：Replace keyword in text by input with AngularJs用AngularJs通过输入替换文本中的关键字
【发布时间】：2014-09-30 09:22:23
【问题描述】：

我开发了一个角度应用程序，我想用具有“日期”类型的输入替换一些关键字，如“[输入日期]”。

我尝试使用正则表达式的替换功能，但不起作用。它向我显示代码而不是输入。

我可以使用 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>

但是

错误：找不到变量：信息

【问题讨论】：

标签： javascript angularjs input

【解决方案1】：

在控制器中操作 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>

【讨论】：

好的，我应该使用指令，但你的例子没有做我想要的......它是指令的例子吗？
我的示例将替换为 HTML。它具有模型属性，您可以在其中传递变量以与输入值相关联。当您在输入中键入文本时，您可以看到“输出”变量发生了变化。
我提出了新的答案。我使用 $compile 而不是 regexp 以使其更灵活。如果它没有按预期工作，请向我提供最终必须呈现的纯 HTML 示例。
谢谢你帮助我。不是这样，但差不多。我会这样渲染：<div>hello, i'am <input type="datetime" ng-model="value"> and i love cacao </div>