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处采用相同的对象模型和相同的地址模板，我们可以添加两个额外的控制器：

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键会默认提交，但如果您愿意，可以轻松控制。

最后，你可以使用指令完成所有这些，就像有人已经建议的那样，但你最终会使用角度指令作为控制器，并且根据角度它们不是那个意思，更多信息在这里：{{3 }}

Answer 2

在这个问题的几个月里挣扎之后，我现在用这种方法来避免重复模板：

在控制器中：

$scope.myelement = {...};
$scope.myelements = [{ ...}, { ... }]

在模板myelement.html中：

{{ myelement.name }} {{ myelement.anything }}

在模板中：

<div ng-include="'myelement.html'"></div>  <!-- $scope.myelement is used --> 
<div ng-repeat="myelement in myelements track by $index"></div> <!-- $scope.myelements[$index] used myelements.length times -->

如果您想指定另一个变量，您可以这样做：

<div ng-include="'myelement.html'" ng-init="myelement = SomeScopeVariable;"></div>

但在这种情况下，仅在编译ng-include时调用ng-init。并且您将无法更改其中的“myelement”，您只能修改其属性。我不建议使用ng-init，除非您只想修改/可视化控制器中的特定元素。如果要删除它或创建另一个，请不要使用ng-init。

Answer 3

ng-include共享相同的控制器和相同的数据。

因此解决方案可能是想到别的东西。也许是模板指令。您可以传递模板以及不同的值。

// Directive
app.directive('addressTemplate', function() {
    return {
        templateUrl: '/templates/address.html',
        scope: {
            street: '='
        }
    };
});

// My template
<address-template street="MyEmployer.Address.Street"></address-template>

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

你如何在angularjs中重用模板

3 个答案: