angularjs 重用模板并绑定到同一范围内的不同属性

Question

我想多次重复使用 express 包含的模板，并有选择地将它绑定到范围的不同属性，如下所示：

<div ng-show="isCoApplicant" bind-to="applicant in data.coApplicant">
    <% include ../row-templates/applicant-row %>
</div>

类似于 ng-repeat 的行为，它为行创建子作用域并根据表达式 'applicant in data.coApplicant' 在其上设置属性，并且行输入可以绑定到 'applicant' 通过 ng-model.

我花了一些时间研究各种 angular 指令，包括 ng-controller、ng-include、ng-model 等，但我似乎无法将它们组合在一起。

感谢任何有关解决此绑定的帮助。

Answer 1

使用指令。在您的 HTML 中，您可以使用 <my-applicant> 调用指令，您可以多次使用它，并且 data.coApplicant 之类的数据可以通过 applicantData 属性绑定到每个指令隔离范围.

HTML

<my-applicant applicantData='data.coApplicant'></my-applicant>

指令 JS

.directive('myApplicant', function() {
  return {
    restrict: 'E',
    scope: {
      applicantData: '='
    },
   template: '<div ng-show="isCoApplicant"' +
             'bind-to="applicant in data.coApplicant">' +
             '<% include ../row-templates/applicant-row %></div>'
  };
});

有关指令的更多信息，请阅读文档开发人员指南 https://docs.angularjs.org/guide/directive

Answer 2

@cheekybastard 使用指令范围和模板属性让我走上正轨。最后，我想要一个可重用的指令，用于动态包含模板并将特定的属性从父作用域绑定到模板的作用域中。我很惊讶 angular 还没有这样的东西，我想我的用例不太常见。

这就是我最终得到的结果：

HTML

<div bind-template-to="data.coApplicant" template-url="/row-templates/applicant-row.ejs"></div>

指令 JS

.directive('bindTemplateTo', function() {
    return {
        restrict: 'A',
        scope: {
            data: '=bindTemplateTo'
        },
        templateUrl: function(element, attr) { return attr.templateUrl; }
    };
});

模板

<input ng-model="data.first" ...>

您似乎需要在指令中通过 template 或 templateUrl 属性使用模板，以便隔离范围可用于您的元素。 IE。如果您只是使用指令为 div 创建隔离范围并希望 div 中的元素将绑定到新的隔离范围，您将感到失望。

感谢您的帮助。

angularjs 重用模板并绑定到同一范围内的不同属性

angularjs reuse template and bind to different properties within the same scope

binding

templates

express

angularjs