Javascript AngularJS-如何更改包含数据绑定的模板中的元素？
建议在模板中使用动态标记名的最佳方式是什么 我有一个包含h1-h6标签的下拉列表。用户可以选择其中任何一个，内容将更改为由所选的标题标记（存储在$scope上）包装。内容绑定到模型，即{{}内 要持久化绑定，我可以更改标记并使用$compile。但是，这不起作用，因为在Angular将{{}替换为模型值之前（显然）会追加它。页面加载时是h3 例如：Javascript AngularJS-如何更改包含数据绑定的模板中的元素？,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,建议在模板中使用动态标记名的最佳方式是什么 我有一个包含h1-h6标签的下拉列表。用户可以选择其中任何一个，内容将更改为由所选的标题标记（存储在$scope上）包装。内容绑定到模型，即{{}内 要持久化绑定，我可以更改标记并使用$compile。但是，这不起作用，因为在Angular将{{}替换为模型值之前（显然）会追加它。页面加载时是h3 例如： <div id="root"> <h3 id="elementToReplace">{{ modelData }}&
<div id="root">
<h3 id="elementToReplace">{{ modelData }}</h3>
</div>
{{modelData}}
<{{ tag }} id="elementToReplace">{{ modelData }}</{{ tag }}>
{{modelData}
H1
氢
H3
H4
H5
嘿
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);
});
}
}
});
var-app=angular.module（'app'，[]）；
应用指令（'tag'，函数（$interpolate）{
返回{
限制：'E'，
范围：{
标记名：'='
},
链接：函数（$scope、$element、$attr）{
var content=$element.html（）；
$scope.$watch（'tagName'，函数（newVal）{
$element.contents（）.remove（）；
var标记=$interpolate（“{{content}}”）
（{标记名：$scope.tagName，内容：content}）；
var e=角度元素（标签）；
$element.append（e）；
});
}
}
});
H1
氢
H3
H4
H5
嘿
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);
});
}
}
});
var-app=angular.module（'app'，[]）；
应用指令（'tag'，函数（$interpolate）{
返回{
限制：'E'，
范围：{
标记名：'='
},
链接：函数（$scope、$element、$attr）{
var content=$element.html（）；
$scope.$watch（'tagName'，函数（newVal）{
$element.contents（）.remove（）；
var标记=$interpolate（“{{content}}”）
（{标记名：$scope.tagName，内容：content}）；
var e=角度元素（标签）；
$element.append（e）；
});
}
}
});
注意，在custom指令中，我们使用$interpolate服务根据在select列表中选择的标记生成HTML元素。$watch函数用于监视标记模型的更改，当它更改时，新元素将附加到DOM中 这是我弄来的，尽管你说你不想要；）
var-app=angular.module（'app'，[]）；
app.controller（'ctrl'，['$scope'，函数（$scope）{
$scope.modelData=“模型数据”+
“这是更改标记中的文本！
”；
$scope.tags=[“h1”、“h2”、“h3”、“h4”、“p”]；
$scope.selectedTag=“p”；
}]);
应用程序指令（“标记选择器”，函数（）{
返回{
resrict:'A'，
范围：{
modelData:“@”，
已选择标记：“@”
},
链接：功能（范围、el、属性）{
范围：$watch（“selectedTag”，updateText）；
el.prepend（scope.modelData）；
函数updateText（）{
var tagStart=“”；
var tagEnd=“”；
$（“#替换”）.replaceWith（tagStart+$（“#替换”）.html（）+tagEnd）；
}
}
}
});
var-app=angular.module（'app'，[]）；
app.controller（'ctrl'，['$scope'，函数（$scope）{
$scope.modelData=“模型数据”+
“这是更改标记中的文本！
”；
$scope.tags=[“h1”、“h2”、“h3”、“h4”、“p”]；
$scope.selectedTag=“p”；
}]);
应用程序指令（“标记选择器”，函数（）{
返回{
resrict:'A'，
范围：{
modelData:“@”，
已选择标记：“@”
},
链接：功能（范围、el、属性）{
范围：$watch（“selectedTag”，updateText）；
el.prepend（scope.modelData）；
函数updateText（）{
var tagStart=“”；
var tagEnd=“”；
$（“#替换”）.replaceWith（tagStart+$（“#替换”）.html（）+tagEnd）；
}
}
}
});
angular.module（'myApp'，[]）
.directive（'tag'，function（$interpolate，$compile）{
返回{
优先：500，
限制：“AE”，
终端：是的，
范围：{
标记名：'='
},
链接：函数（$scope$element）{
$scope.$on（“$destroy”，函数（）{
$scope.$destroy（）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../lib/jquery.js"></script>
<script src="../lib/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('ctrl', ['$scope', function ($scope) {
$scope.modelData = "<h1>Model Data</h1>" +
"<p id='replace'>This is the text inside the changing tags!</p>";
$scope.tags = ["h1", "h2", "h3", "h4", "p"];
$scope.selectedTag = "p";
}]);
app.directive("tagSelector", function(){
return {
resrict: 'A',
scope: {
modelData: '@',
selectedTag: '@'
},
link: function(scope, el, attrs){
scope.$watch("selectedTag", updateText);
el.prepend(scope.modelData);
function updateText(){
var tagStart = "<" + scope.selectedTag + " id='replace'>";
var tagEnd = "</" + scope.selectedTag + ">";
$("#replace").replaceWith(tagStart + $("#replace").html() + tagEnd);
}
}
}
});
</script>
</head>
<body ng-app="app">
<div ng-controller="ctrl">
<select ng-model="selectedTag" ng-options="tag for tag in tags"></select>
<div tag-selector selected-tag="{{selectedTag}}" model-data="{{modelData}}"></div>
</div>
</body>
</html>
angular.module('myApp', [])
.directive('tag', function($interpolate, $compile) {
return {
priority: 500,
restrict: 'AE',
terminal: true,
scope: {
tagName: '='
},
link: function($scope, $element) {
$scope.$on('$destroy', function(){
$scope.$destroy();
$element.empty();
});
$scope.$parent.$watch($scope.tagName, function(value) {
$compile($element.contents())($scope.$parent, function(compiled) {
$element.contents().detach();
var tagName = value || 'div';
var root = angular.element(
$element[0].outerHTML
.replace(/^<\w+/, '<' + tagName)
.replace(/\w+>$/, tagName + '>'));
root.append(compiled);
$element.replaceWith(root);
$element = root;
});
});
}
}
})
.controller('MyCtrl', function($scope) {
$scope.items = [{
name: 'One',
tagName: 'a'
}, {
name: 'Two',
tagName: 'span'
}, {
name: 'Three',
}, {
name: 'Four',
}];
});
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<tag class="item" tag-name="'item.tagName'" ng-repeat="item in items">
{{item.name}}
</tag>
</div>
</div>