0

我有一些角度代码，可以将一些输入文本框添加到 div 中。我想将 ng-module="..." 添加到那些新创建的文本框，但如果我这样做，它们似乎不会通过角度注册为模型。

基本上我试图在运行时创建这些输入框，给它们一个 ng-model 属性，然后创建一个包含模型的 div：

<input type="text" ng-model="placeholder_name" />
....
<div id="content">{{placeholder_name}}</div>

应用程序.js

var ViewCtrl = function($scope, $location, $routeParams, Template) {
    var id = $routeParams.templateId;
    var template = Template.get({id: id}, function(res) {
        $scope.template = template;
    });

    /*** Template placeholders ***/
    $scope.updatePlaceholders = function () {
        var placeholders = [];
        var content = template.content;

        // get placeholders that match patter
        var match = content.match(/{([A-z0-9]+)}/gmi);

        // if there are placeholders
        if (match !== null) {
            // foreach placeholder
            for (var i = match.length - 1; i >= 0; i--) {
                // strip braces
                var holder = match[i].replace(/(}|{)/g, '');
                // add to placeholders array
                placeholders.push(holder);
            }
        }

        // remove duplicates
        $scope.placeholders = $.unique(placeholders);

        // now go through each placeholder in content box and replace with {{model}}.
        for (var k = 0; k < placeholders.length; k++) {
            var placeholder_new = '<span class="placeholder placeholder-' + placeholders[k] + '">{{' + placeholders[k] + '}}</span>';
            var regex = new RegExp("{" + placeholders[k] + "}", "g");
            var new_content = $scope.template.content.replace(regex, placeholder_new);
            $scope.template.content = new_content;
        }
    }
}

视图.html

<h2>Template: {{template.title}}</h2>
<div class="well well-small">
    <p><strong>Placeholders</strong></p>
    <div class="placeholder-list">
        <span ng-repeat="placeholder in placeholders">  
            <input type="text" class="span2 placeholder" ng-model="placeholder_{{placeholder}}" value="{{placeholder}}" />
            <span ng-show=" ! $last ">&nbsp;</span>
        </span>
    </div>
</div>
<div contenteditable="true" id="content" ng-bind-html="template.content"></div>

这个想法是我的 template.content 包含这样的文本：

Look! {this} is a placeholder.

我找到 {...} 的所有实例并为它们创建输入框。然后，我将 {...} 替换<span>{{<model>}}</span>为当我更改 tet 框的值时，这会跨越内容更改

此行引发错误。不喜欢我创建 ng-model 的方式：

<input type="text" class="span2 placeholder" ng-model="placeholder_{{placeholder}}" value="{{placeholder}}" />

错误：语法错误：标记“{”是表达式 [placeholder_{{placeholder}}] 的第 13 列中的意外标记，从 [{{placeholder}}] 开始。

4

0 回答 0