18

カスタム タグを通常の HTML に置き換えるディレクティブがあります。削除したい属性がいくつかあります。たとえば、構文が与えられた場合

<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 が数千回表示されます)。

4

1 に答える 1