奇妙なngIfは+ $私は、次どうなるのディレクティブ構築しようとしている行動

をコンパイル：

（例えばngSwipeRight）要素に別のディレクティブを追加し、新規にいくつかのカスタム動作を追加指令。

例は次のようになります。ngSwipeRightを追加すると、ユーザーが要素の上にスワイプしたときに、私はhistory.back()を行うだろうmySwipeBack。

私はこのように試してみました：

.directive('swipe', function($compile){ 
    return { 
    restrict: 'A', 
    compile: function(el){ 
     // I removed all the actual logic for demo purposes 
     // here I would add ng-swipe-right plus a handler 
     el.removeAttr('swipe'); 
     var fn = $compile(el); 
     return function (scope) { 
      fn(scope); 
     }; 
    } 
} 
});

をしかし、私は次のマークアップで問題に遭遇した：

<div ng-if='true'> 
    <h1 swipe>OUTSIDE 
    <div ng-if="true">INSIDE</div> 
    </h1> 
</div>

"INSIDE" のテキストが描画されません。このjsbinの動作を見ることができます：http://jsbin.com/tokofevuga/edit?html,js,output

最初のng-ifを削除すると、意図した通りに動作します。

誰かが理由を知っていますか？これを後ろ向きにしていますか？

誰かが私が上で説明したことを達成する方法の別のアイデアを持っていれば？

出典

2017-04-27 sirrocco

。なぜそれが起こるかわからない。 – koox00

はい、私はng-ifが必要です:) – sirrocco

@sirrocco指令の 'compile'関数のコードを参照して：なぜあなたは手動で要素をコンパイルしていますか？ 'el.removeAttr（ 'swipe'）のみを持つようにコンパイル関数の最後の3行を削除した場合、それらは動作するためには、要素上にいくつかのディレクティブを追加する必要があるため、期待通りに動作します（ –

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

私のために働く... とポイントがあなたのコードであることです。

出典

2017-05-03 16:54:16

これを考慮してください。 ngIfは要素全体を削除し、コメントで置き換えます。その表現が次に観察される。その後の変更により、DOMとREMOVEDの間の要素がトリガされます。

問題は、ブロックをコンパイルフェーズに配置したことです。 ng-if全体のコードは1つのコメントに置き換えられます。

解決策には多くのものがあります。それは、あなたのアプリなら構造やニーズにうまくいくかどうかにかかっています。

私は2つの提案：

1） 'は、リンク' 相への 'コンパイル' からロジックを移動します。

link: function(el){ 
    el.removeAttr('swipe'); 
    var fn = $compile(el); 
    return function (scope) { 
     fn(scope); 
    }; 
},

2）トランジションを使用する必要があります。あなたのサンプルの

app.directive('swipe', function($compile){ 
return { 
    restrict: 'A', 
    compile: function(el){ 
    el.removeAttr('swipe'); 
    var fn = $compile(el); 
    return function (scope) { 
     fn(scope); 
     }; 
    }, 
    transclude: true, 
    template: "<div ng-transclude></div>" 
} 
});

次のフォークはあなたを導くかもしれません：http://jsbin.com/mubodevofa/1/edit?html,js,output

http://jsbin.com/zecujonoqi/1/edit?html,js,outputはそれがお役に立てば幸いです。ここでの機能は、コンパイルから返されている間、あなたが後でsomewhen実行されること、ディレクティブのコンパイルですぐに要素をコンパイル -

出典

2017-05-02 18:14:26

ng-ifはそれ自身のscopeを作成するので、あまりにも早く要素をコンパイルすると思っています。

以下のコードスニペットでは、compile partをlinkに移動し、その要素をディレクティブ自体の現在のスコープでバインドしました。 `NG-show`作品で` NG-if`sのいずれかを交換する

var app = angular.module('jsbin', []); 
 

 
app.controller('DemoCtrl', function() { 
 

 
}); 
 

 
app.directive('swipe', function($compile) { 
 
    return { 
 
    restrict: 'A', 
 
    link: function($scope, el) { 
 
     el.removeAttr('swipe'); 
 
     $compile(el)($scope); 
 
    } 
 
    } 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Angular JS</title> 
 
</head> 
 

 
<body ng-app="jsbin"> 
 
    <div ng-controller="DemoCtrl"> 
 
    <div ng-if='true'> 
 
     <h1 swipe>OUTSIDE 
 
     <div ng-if="true">INSIDE</div> 
 
     </h1> 
 
    </div> 
 
    </div> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.js"></script> 
 
</body> 
 

 
</html>

出典

2017-05-04 03:38:14 Pengyy

奇妙なngIfは+ $私は、次どうなるのディレクティブ構築しようとしている行動

答えて

関連する問題