AngularJS - 如何更改包含数据绑定的模板中的元素? [英] AngularJS - How do I change an element within a template that contains a data-binding?
问题描述
Angular 最推荐在模板中使用动态标签名称的方式是什么?
我有一个包含 h1-h6 标签的下拉菜单.用户可以选择其中任何一个，内容将更改为由所选标头标签(存储在 $scope 中)包装.内容绑定到模型，即在 {{ }} 内.
为了保持绑定，我可以更改标记并使用 $compile.但是，这不起作用，因为它在 Angular 用模型值替换 {{ }} 之前被附加(显然).页面加载时间为 h3.
示例:
<h3 id="elementToReplace">{{modelData }}</h3>重新编译时，我尝试使用如下字符串:
<{{ tag }} id="elementToReplace">{{ modelData }}</{{ tag }}>有什么想法吗?
定义一个名为tag"的范围变量并将其绑定到您的选择列表和自定义指令.
HTML:
接下来，使用双向模型绑定将标签作用域模型传递到您的指令中:
var app = angular.module('app',[]);app.directive('tag', function($interpolate) {返回 {限制:'E'，范围: {标签名称:'='},链接:函数($scope，$element，$attr){var content = $element.html();$scope.$watch('tagName', function(newVal) {$element.contents().remove();var tag = $interpolate('<{{tagName}}>{{content}}</{{tagName}}>')({tagName: $scope.tagName, content: content});var e = angular.element(tag);$element.append(e);});}}});请注意，在自定义指令中，我们使用 $interpolate 服务根据在选择列表中选择的标签生成 HTML 元素.$watch 函数用于监视标签模型的变化，当它发生变化时，新元素会附加到 DOM 中.
What is the most Angular recommended way to use a dynamic tag name in a template?
I have a drop-down containing h1-h6 tags. A user can choose any of these and the content will change to being wrapped by the chosen header tag (which is stored on the $scope). The content is bound to the model i.e. within {{ }}.
To persist the binding I can change the markup and use $compile. However, this does not work because it gets appended (obviously) before Angular replaces the {{ }} with model values. It's h3 on page load.
Example:
<div id="root">
<h3 id="elementToReplace">{{ modelData }}</h3>
</div>
When re-compiling I have tried using a string as follows:
<{{ tag }} id="elementToReplace">{{ modelData }}</{{ tag }}>
Any ideas?
Define a scope variable named 'tag' and bind it to both your select list and custom directive.
HTML:
<select ng-model="tag" ng-init="tag='H1'">
<option ng-value="H1">H1</option>
<option ng-value="H2">H2</option>
<option ng-value="H3">H3</option>
<option ng-value="H4">H4</option>
<option ng-value="H5">H5</option>
</select>
<tag tag-name="tag">Hey There</tag>
Next, pass the tag scope model into your directive using two-way model binding:
var app = angular.module('app',[]);
app.directive('tag', function($interpolate) {
return {
restrict: 'E',
scope: {
tagName: '='
},
link: function($scope, $element, $attr) {
var content = $element.html();
$scope.$watch('tagName', function(newVal) {
$element.contents().remove();
var tag = $interpolate('<{{tagName}}>{{content}}</{{tagName}}>')
({tagName: $scope.tagName, content: content});
var e = angular.element(tag);
$element.append(e);
});
}
}
});
Notice that in the custom directive, we are using the $interpolate service to generate the HTML element based on the Tag that was selected in the select list. A $watch function is used to watch for changes to the tag model, and when it changes, the new element is appended to the DOM.
这篇关于AngularJS - 如何更改包含数据绑定的模板中的元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
