Question

是否可以多次使用相同的ng-model指令并唯一地访问它们？

我有一个指令，用一个模板的多个实例填充页面。由于它是相同的模板，因此添加的所有ng-model属性都指向控制器中的同一变量。

我目前正在使用document.getElementsByName()，因此我得到了一个可以迭代的列表，但是当尝试获取数据而不是简单地引用控制器中的变量时，会更加混乱

编辑：

此HTML：

<div class="row">
    <tib-copy></tib-copy>
</div>

获取注入并成为：

<tib-copy>
    <fieldset class="col-md-2" style="margin-bottom: 10px">
        <legend>Copy</legend>

        <input type="text" ng-model="searchOptions.sourceServer">
        <br/>
        <input type="text" ng-model="searchOptions.sourcePath">
        <br/>
        <input type="text" ng-model="searchOptions.destServer">
        <br/>
        <input type="text" ng-model="searchOptions.destPath">
    </fieldset>
</tib-copy>

再次执行此操作（单击调用该函数以通过ng-click执行注入的按钮）将导致在DOM中重复相同的ng-model标记。

例如，我希望将ng-model的所有"searchOptions.sourceServer"属性作为列表或允许我单独提取值的内容。但是，由于双向绑定，所发生的所有文本字段都使用相同的值进行更新。

Answer 1

为此，您需要使用import google.cloud.pubsub_v1作为ngModelController指令。这意味着您在其中定义的每个模型都充当本地指令模型。然后，您必须将它们解析为更高级别tibCopy，并将该指令转换为其他组件。

例如，您可以从以下指令结构开始：

ngModel

您将使用以下指令： App.directive('tbpCopy', function () { return { restrict: 'E', require: 'ngModel', templateUrl: '<fieldset class="col-md-2" style="margin-bottom: 10px">' + '<legend>Copy</legend>' + '<input type="text" ng-model="searchOptions.sourceServer">' + '<input type="text" ng-model="searchOptions.sourcePath">' + '<input type="text" ng-model="searchOptions.destServer">' + '<input type="text" ng-model="searchOptions.destPath">' + '</fieldset>', link: function($scope, $element, $attrs, $model){ $model.$formatters.push(function(modelValue) { if(modelValue){ return { searchOptions: { sourceServer: modelValue.searchOptions.sourceServer, sourcePath: modelValue.searchOptions.sourcePath, destServer: modelValue.searchOptions.destServer, destPath: modelValue.searchOptions.destPath } }; } }); $model.$render = function() { if($model.$viewValue){ $scope.searchOptions = { sourceServer: $model.$viewValue.searchOptions.sourceServer, sourceServer: $model.$viewValue.searchOptions.sourcePath, sourceServer: $model.$viewValue.searchOptions.destServer, sourceServer: $model.$viewValue.searchOptions.destPath } } }; $model.$parsers.push(function(viewValue) { if(viewValue){ return { searchOptions: { sourceServer: viewValue.searchOptions.sourceServer, sourcePath: viewValue.searchOptions.sourcePath, destServer: viewValue.searchOptions.destServer, destPath: viewValue.searchOptions.destPath } }; } }); } }; });

然后您就可以获得<tbp-copy ng-model="ctrl.SomeHigherModel"></tbp-copy>中应该等于的基础值：

ctrl.SomeHigherModel

使用ng-model指令从动态创建的标记中提取数据

1 个答案: