javascript - 你如何在angularjs中重用模板

Question

如何重复使用模板？考虑以下 javascript 对象:

{
    MyName: '',
    Address: {
        Street: ''
    },
    MyEmployer: {
        CompanyName: '',
        Address: {
            Street: ''
        }
    }
}

还有一个位于 /templates/myTemplate.html 的模板文件:

<div ng-app="someapp" ng-controller="somecontroller">
    MyName: <input type="text" ng-model="MyName" />

    <div ng-include="'/templates/address.html'"></div>

    My Company: <input type="text" ng-model="MyEmployer.CompanyName" />

    <div ng-include="'/templates/address.html'"></div>
</div>

这是我想象中位于 /templates/address.html 的地址模板文件的样子:

<div>
    Street: <input type="text" ng-model="Street" />
</div>

如您所见，我正在尝试重新使用此处的地址模板。那么如何将适当的对象传递给此模板呢？

Answer 1

回答 我设法自己解决了这个问题，并想将它张贴在这里，以供下一个可能正在寻找同样款待的人使用。

我的解决方案

在我的 OP 中，我有一个包含两个地址的模型对象，一个地址是此人的家，另一个地址是他/她的雇主。因此，在 /templates/address.html 中采用相同的对象模型和相同的地址模板，我们可以添加两个额外的 Controller :

app.controller('personAddressController', ['$scope', function($scope) {
   $scope.Street = function(newValue) { return arguments.length ? model.Address.Street = newValue : model.Address.Street; }
}]);
app.controller('companyAddressController', ['$scope', function($scope) {
   $scope.Street = function(newValue) { return arguments.length ? model.MyEmployer.Address.Street = newValue : model.MyEmployer.Address.Street; }
}]);

地址模板的 ng-include 用法:

<div ng-include="'/templates/address.html'" ng-controller="personAddressController"></div>

<div ng-include="'/templates/address.html'" ng-controller="companyAddressController"></div>

我们还需要修改我们的地址模板:

<div>
    Street: <input type="text" ng-model="Street" ng-model-options="{ getterSetter: true }" />
</div>
<!--or add a form if you have more fields like i did-->
<form ng-model-options="{ getterSetter: true }">
    <div>
        Street: <input type="text" ng-model="Street" />
    </div>
</form>

有关 ng-model-options 和 setter/getter(页面底部)的更多信息:https://docs.angularjs.org/api/ng/directive/ngModel

虽然添加表单时要小心，因为默认情况下 enter 键会进行提交，但如果您愿意，您可以轻松控制它。

最后，您可以使用指令来完成所有这一切，正如有人已经建议的那样，但您最终会使用 Angular Directive(指令)作为 Controller ，并且根据 Angular ，它们并不是为此而设计的，更多信息在这里:AngularJS - Directives vs Controllers