AngularJS - 如何更改包含数据绑定的模板中的元素？

Question

在模板中使用动态标记名称的Angular建议方法是什么？

我有一个包含h1-h6标签的下拉列表.用户可以选择其中任何一个,并且内容将更改为由所选标头标记(存储在$ scope中)进行包装.内容绑定到模型,即{{}}内.

要保持绑定,我可以更改标记并使用$ compile.但是,这不起作用,因为它会在Angular用模型值替换{{}}之前(显然)附加.这是页面加载时的h3.

例:

<div id="root">
    <h3 id="elementToReplace">{{ modelData }}</h3>
</div>

重新编译时我尝试使用如下字符串:

<{{ tag }} id="elementToReplace">{{ modelData }}</{{ tag }}>

有任何想法吗？

Answer 1

Demo Plunker在这里

定义名为"tag"的范围变量,并将其绑定到选择列表和自定义指令.

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>

接下来,使用双向模型绑定将标记范围模型传递到指令中:

  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);
            });
         }
      }
  });

请注意,在custom指令中,我们使用$ interpolate服务根据在选择列表中选择的Tag生成HTML元素.$ watch函数用于监视标记模型的更改,当它更改时,新元素将附加到DOM.