AngularJS 使用参数创建部分模板
AngularJS create partial template with parameter
我已经完成了以下 SO 个问题以获得我想要的。
create a single html view for multiple partial views in angularjs
Partial views in AngularJS
AngularJs Include Partial Template
angularjs partial template with specific scope - 看起来很接近我想要的。
但我相信我的情况与所有人都不一样。因此,问题。
我得到了这个HTML
结构,需要重复多次。
<tr>
<td>
Enitity1
</td>
<td>
<input type="radio" name="entity1" value="option1" />
</td>
<td>
<input type="radio" name="entity1" value="option2" />
</td>
<td>
<input type="radio" name="entity1" value="option3" />
</td>
<td>
<input type="radio" name="entity1" value="option4" />
</td>
<td>
<input type="radio" name="entity1" value="option5" />
</td>
</tr>
我想将实体的名称作为参数传递,并根据参数呈现此 HTML 模板。
我创建了如下模板。
<tr>
<td>
{{entity}}
</td>
<td>
<input type="radio" name="{{entity}}" value="option1" />
</td>
<td>
<input type="radio" name="{{entity}}" value="option2" />
</td>
<td>
<input type="radio" name="{{entity}}" value="option3" />
</td>
<td>
<input type="radio" name="{{entity}}" value="option4" />
</td>
<td>
<input type="radio" name="{{entity}}" value="option5" />
</td>
</tr>
我的控制器
app.controller("entitiesController", ["$scope",
function entitiesController($scope) {
$scope.init = function init(entity) {
$scope.entity= entity;
};
}
]);
而且我正在尝试在 <tbody>
元素内为多个实体呈现相同的效果,如下所示。
<ng-include src="Common/entities.html" ng-controller="entitiesController" ng-init="init('Entity1')"></ng-include>
<ng-include src="Common/entities.html" ng-controller="entitiesController" ng-init="init('Entity2')"></ng-include>
<!-- Some more entities here...-->
但它不起作用。它也不会在控制台中抛出任何错误。
我该怎么做?处理这个问题的正确方法是什么?是否可以使用模板处理它,或者我应该手动为所有实体放置 HTML?
您可以 directive
为您做这件事。像,
myApp.directive("myEntity", function() {
return {
restrict: "E",
scope: {
entity: "="
},
templateUrl: "Common/entities.html"
}
})
现在,您可以使用已在 Common/entities.html
中创建的模板,即
<tr>
<td>
{{entity}}
</td>
<td>
<input type="radio" name="{{entity}}" value="option1" />
</td>
<td>
<input type="radio" name="{{entity}}" value="option2" />
</td>
<td>
<input type="radio" name="{{entity}}" value="option3" />
</td>
<td>
<input type="radio" name="{{entity}}" value="option4" />
</td>
<td>
<input type="radio" name="{{entity}}" value="option5" />
</td>
</tr>
最后,像 <my-entity entity="entityObj"></my-entity>
一样使用它,其中 entityObj
是 $scope
中的一个变量(或者相应地,如果您使用 controllerAs
语法)
编辑:另一种方法是将指令作为属性而不是元素。
myApp.directive("myEntity", function() {
return {
restrict: "A",
...
}
})
然后,从模板中删除 <tr>
。现在,我们可以像这样使用它,
<tbody>
<tr my-entity entity="entityObj">
</tr>
</tbody>
我已经完成了以下 SO 个问题以获得我想要的。
create a single html view for multiple partial views in angularjs
Partial views in AngularJS
AngularJs Include Partial Template
angularjs partial template with specific scope - 看起来很接近我想要的。
但我相信我的情况与所有人都不一样。因此,问题。
我得到了这个HTML
结构,需要重复多次。
<tr>
<td>
Enitity1
</td>
<td>
<input type="radio" name="entity1" value="option1" />
</td>
<td>
<input type="radio" name="entity1" value="option2" />
</td>
<td>
<input type="radio" name="entity1" value="option3" />
</td>
<td>
<input type="radio" name="entity1" value="option4" />
</td>
<td>
<input type="radio" name="entity1" value="option5" />
</td>
</tr>
我想将实体的名称作为参数传递,并根据参数呈现此 HTML 模板。
我创建了如下模板。
<tr>
<td>
{{entity}}
</td>
<td>
<input type="radio" name="{{entity}}" value="option1" />
</td>
<td>
<input type="radio" name="{{entity}}" value="option2" />
</td>
<td>
<input type="radio" name="{{entity}}" value="option3" />
</td>
<td>
<input type="radio" name="{{entity}}" value="option4" />
</td>
<td>
<input type="radio" name="{{entity}}" value="option5" />
</td>
</tr>
我的控制器
app.controller("entitiesController", ["$scope",
function entitiesController($scope) {
$scope.init = function init(entity) {
$scope.entity= entity;
};
}
]);
而且我正在尝试在 <tbody>
元素内为多个实体呈现相同的效果,如下所示。
<ng-include src="Common/entities.html" ng-controller="entitiesController" ng-init="init('Entity1')"></ng-include>
<ng-include src="Common/entities.html" ng-controller="entitiesController" ng-init="init('Entity2')"></ng-include>
<!-- Some more entities here...-->
但它不起作用。它也不会在控制台中抛出任何错误。
我该怎么做?处理这个问题的正确方法是什么?是否可以使用模板处理它,或者我应该手动为所有实体放置 HTML?
您可以 directive
为您做这件事。像,
myApp.directive("myEntity", function() {
return {
restrict: "E",
scope: {
entity: "="
},
templateUrl: "Common/entities.html"
}
})
现在,您可以使用已在 Common/entities.html
中创建的模板,即
<tr>
<td>
{{entity}}
</td>
<td>
<input type="radio" name="{{entity}}" value="option1" />
</td>
<td>
<input type="radio" name="{{entity}}" value="option2" />
</td>
<td>
<input type="radio" name="{{entity}}" value="option3" />
</td>
<td>
<input type="radio" name="{{entity}}" value="option4" />
</td>
<td>
<input type="radio" name="{{entity}}" value="option5" />
</td>
</tr>
最后,像 <my-entity entity="entityObj"></my-entity>
一样使用它,其中 entityObj
是 $scope
中的一个变量(或者相应地,如果您使用 controllerAs
语法)
编辑:另一种方法是将指令作为属性而不是元素。
myApp.directive("myEntity", function() {
return {
restrict: "A",
...
}
})
然后,从模板中删除 <tr>
。现在,我们可以像这样使用它,
<tbody>
<tr my-entity entity="entityObj">
</tr>
</tbody>