angularjs - 具有特定类型的通用指令(UI 组件继承)

Question

我正在开发一个项目，以特殊的 XML 作为输入来呈现 HTML。我已经成功地完成了基本案例。例如:

<mybutton name="layla"></mybutton>

转换为

<div class="btn">Layla</div>

使用类似指令

.directive('mybutton', function() {
    return {
        restrict: 'E',
        scope: {
            name: '@'
        },
        templateUrl: 'uicomponents/uiButton.html'
    }
})

我将收到的真实 XML 输入是:

<ui type="back_button" x="10.0" y="630.0"/>

我想避免更改 XML 语法，但如果需要的话可以这样做。所有屏幕组件都在 <ui></ui> 中标签。 type属性定义组件。

你会如何为这种标签编写指令？为 <ui> 创建一个巨大的指令似乎并不明智。元素并在属性内部有一个长的 switch-case。

Answer 1

您可以创建一个 ui 指令，根据 type 属性转换元素，然后重新编译该元素 - 如下所示:

app.directive('ui',function($compile){
  return {
    restrict:'E',
    compile:function(tElement,tAttrs){
      if(tAttrs.type){
        tElement.attr(tAttrs.type,'');
        tElement.removeAttr('type');
        return function(scope,el){
          $compile(el)(scope);
        }
      }

    }  
  }
});


app.directive('backButton',function(){
  return {
    replace:true,
    template:'<button ng-click="btnClick()">A back-button template</button>'
  }
});

编辑:在我最初的示例中，我犯了编译模板元素的错误 - 如果该指令在 ngRepeat 中使用，则这将不起作用。修复方法很简单，只需编译链接元素即可。我已经更新了代码和示例。

查看this plnkr example .