Question

所以这有点复杂，我会尽力解释它。最终我要回答的问题是，“如何在HTML中打印模型，而不是模型的价值？” 我相信这个问题的答案将解决我的问题，但我将全面讨论我的问题所以你们都可以告诉我，我可能做错了。在这种情况下，我有很多重写要做，所以我希望不会。

方案：这是最初的HTML页面，其中'field'是一个自定义指令。

<field model="model1" placeholder="Model 1" type="input"></field>
<field model="model2" placeholder="Model 2" type="input"></field>
<field model="model3" placeholder="Model 3" type="input"></field>

这是自定义指令。

app.directive("Field", function(){
  return{
    restrict: "E",
    scope: { model: '=', placeholder:'@', type: '@'},
    templateUrl: function(tElement, tAttrs){
      return 'views/common/' + tAttrs.type + '.html';
    }
  };
});

这是指令的模板。 type属性只是提供不同的模板，这样我就不需要做一个复杂的if then结构。忍受我，它可能会开始变得有点复杂。

<field-label model="model">{{placeholder}}</field-label>
<div class="col-sm-2 no-right-pad">
    <input type="text" ng-model="model.value" placeholder="{{placeholder}}" class="form-control input-sm"></input>
</div>
<div class="col-sm-2 no-pad">
  <field-options field-options-model="model" class="field-options"></field-options>
</div>

正如你应该知道的，这是一个表格。每个初始指令调用都会创建一个包含标签，输入和指令的表单组，可以使用该指令将选项添加到模型中。为了这个练习，我想说我希望能够为每个输入添加注释。当你进入field-options指令时，我会变得有点肮脏，我改变了模型名称，它是以前尝试的遗产，并没有伤害任何东西，但我仍然可以改变它。我不一定需要它，因为指令是嵌套的，因此共享$ scopes。这是指令：

app.directive("FieldOptions", function() {
  return {
    restrict: "E",
    scope: { field: '=FieldOptionsModel' },
    templateUrl: 'views/common/field-options.html'
  };
});

那个模板：

<div class="dropdown">
  <a ng-href class="dropdown-toggle btn btn-bars" data-toggle="dropdown" tabindex="-1"><i class="fa fa-bars"></i></a>
  <ul class="dropdown-menu pull-right">
    <li><a data-toggle="modal" href="#{{field}}-comment-modal">Add Comment</a></li>
  </ul>
</div>

<div id="{{field}}-comment-modal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h3>Submit Comment</h3>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label class="control-label">Add Comment</label>
          <textarea ng-model="field.comments[0].comment" class="form-control"></textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-warning" data-dismiss="modal">Cancel</button>
        <button class="btn btn-primary" data-dismiss="modal" href="#">Add Comment</button>
      </div>
    </div>
  </div>
</div>

好的，如果您不知道，我的字段选项是一个带有下拉列表的按钮，可以选择弹出窗口。因为我们有重复的指令，你可以立即告诉我这个弹出窗口基本上有3个相同的副本存储在DOM结构中。 Model1为1，Model2为1，Model3为1。我们现在遇到的问题是能够为每个字段组调用正确的弹出窗口。由于它通常使用相同的ID构建，因此有3个相同的ID，浏览器无法处理，因此它们只打开第一个。正如您在此处所看到的，我的解决方案是调用模型名称并将其注入到注释弹出窗口的ID中，从而使每个字段组都具有唯一性。问题是 id =“{{field}} - comment-modal”不打印 id =“model1-comment-modal”就像我想要的那样，它反而打印出 id =“{”value“=”无论值可能设置为什么，如果我们在填写输入之前单击添加注释，则为空白。“} - 评论模态“即可。

我回到原来的问题，“如何打印模型字符串，而不是它代表的数据？”或者，我做错了什么，或者如何停止担心并获得新的工作

注意：请你是异教徒，我的例子是愚蠢的，实际使用更加复杂和重复。

Answer 1

不确定是否可以输出变量名称，但可以使用以下解决方案解决您的问题：

将“name”属性添加到模型对象，并使用它来生成ID或
将名为“name”的新参数传递给第一个diretive，并将其传播到内部参数。无论如何，您已经使用了标准属性，例如占位符和类型或
创建一个工厂，负责为整个应用程序生成唯一ID或
只需使用时间戳Date.now（）来为模态ID添加前缀。

希望这会有所帮助。

更新：经过一些挖掘后，可以通过使用指令链接函数的第三个属性从第一个指令中检索字符串model1，model2：

<field model="model1" placeholder="Model 1" type="input"></field>

angular.module('app', []).directive("field", function() {
  return {
    restrict: "E",
    scope: { model: '=', placeholder:'@', type: '@'},
    templateUrl: function(tElement, tAttrs){
      return 'views/common/' + tAttrs.type + '.html';
    },
    link: function(scope, elem, attrs) {
      console.log(attrs.model);
      //Will output model1
    }
  }
});

通过将此字符串转发到内部指令，您可以生成唯一ID

在AngularJS中创建具有重复指令结构的唯一ID

1 个答案: