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

【问题标题】：angularjs reuse template and bind to different properties within the same scopeangularjs重用模板并绑定到同一范围内的不同属性
【发布时间】：2015-07-02 09:28:18
【问题描述】：

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

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

类似于 ng-repeat 的行为，它为行创建子范围并根据表达式“applicant in data.coApplicant”在其上设置属性，并且可以通过 ng 将行输入绑定到“applicant” -模型。

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

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

【问题讨论】：

使用指令并将属性中的applicant 传递给指令范围......类似于<div applicant="data.coApplicant">
为什么需要使用express模板？你不能只使用 AngularJS 模板并创建一个自定义指令吗？

标签： angularjs templates express binding

【解决方案1】：

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

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

【讨论】：

感谢您让我走上正轨，但是 express 包含不能以这种方式工作，因为它是一个中间件包含。正如其他人所说，需要 templateUrl 属性才能将模板绑定到适当的隔离范围。

【解决方案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" ...>

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

感谢您的帮助。

【讨论】：