AngularJS删除属性

我有一个指令，用一些常规的HTML替换我的自定义标签。我想删除一些属性。例如，给定的语法AngularJS删除属性

<ui mybutton width="30"></mybutton>

我的指令将其转换为

<div width="30" class="btn">bla bla </div>

我想删除"width=30"并添加style="width:{{old width value here}}"

我一直在编译和链接功能试验。我应该在编译还是链接功能中做到这一点？

我以为我不得不在编译函数中这样做，因为我想在模板中进行修改。

看到它住在http://jsfiddle.net/WptGC/2/警告：您的浏览器可能会挂起！ 实时安全地看到它http://jsfiddle.net/WptGC/3/让一切崩溃的代码都被评论了。

.directive('mybutton', function($compile) { 
return { 
    restrict: 'A', 
    //transclude: true, 
    template: '<div class="this is my subscreen div" style="width:{{width}}"></div>', 
    replace: false, 
    /*scope: { 
     width: '@', 
     height: '@', 
     x: '@', 
     y: '@' 
    },*/ 

    compile: function($tElement, $tAttrs) { 
     console.log("subscreen template attrs:"); 
     console.log($tAttrs); 
     var el = $tElement[0]; 
     //el.getAttribute('width'); 
     var stylewidth = el.getAttribute('width'); 
     el.removeAttribute('width'); 

     return function(scope) { 
      $compile(el)(scope); 
     } 
    } 
} 
})

我只是得到一个奇怪的循环（即执行console.log显示了几千次）

来源

2013-04-11 Eduard Gamonal

的原因，你都拿到了环是你调用$编译相同的元素，因此编译函数被再次呼吁。 – kvetis 2015-01-28 13:31:02

除非我失去了一些其他的要求，你就应该能够使用隔离范围和模板，如：

http://jsfiddle.net/WptGC/6/

app.directive('backbutton',function(){ 
    return { 
    restrict: 'A', 
    replace:true, 
    scope: { 
     x: '@', 
     y: '@' 
    }, 
    template:'<button style="width: {{x}}px; height: {{y}}px">A back-button template</button>', 
    link: function (scope, element, attrs) { 
     element.removeAttr('x').removeAttr('y'); 
    } 
    } 
});

来源

2013-04-11 13:32:08 Langdon

您好，是的，这是我第一次尝试，但它保留了原来的属性： '

' 这让我觉得，我不得不使用编译功能，但'返回功能（范围）{ $编译致发光（EL）（范围）; }'使浏览器崩溃你也可以在jsfiddle中检查生成的代码 – 2013-04-11 14:02:50

我修改了答案。不过，我不会花太多时间担心标记，因为Angular会自由地使用它。是否有某些原因导致您不能在HTML中保留x =“10.0”？ – Langdon 2013-04-11 14:06:35

是的，有时它不会是“x”或“y”，而是“宽度”和其他可以定义组件布局的属性。它的价值将与CSS中的相同，所以它现在不会成为脖子上的痛苦，但在将来可能难以维持。你的答案有效！非常感谢。 – 2013-04-11 14:14:54

AngularJS删除属性

回答

相关问题