2016-07-03 16 views
0

このPLUNKにはng-showという要素を持つdivがあり、これはshow()関数を呼び出すfalseを返します。したがって、私はdivが表示されないことを期待しています。`ng-show`呼び出し関数が動作しません

また、show()関数が2回呼び出されることを確認してください(console.logにsh変数が2回表示されます)。これを修正するには?

Javascriptを

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

app.directive('mydir', function ($compile) { 

    var directive = {}; 

    directive.restrict = 'EA'; 

    directive.scope = { 
     control: '=' 
    }; 

    directive.template = '<div id="root"></div>'; 

    directive.link = function (scope, element, attrs) { 

     var sh = false;  
     var wrap = angular.element('<div id="wrap" ng-show="show()"></div>'); 
     wrap.attr('sh', sh); 
     var wrapc = $compile(wrap)(scope) 
     element.append(wrapc); 

     scope.show = function() { 
     var elem = angular.element(document.querySelector('#wrap')); 
     var sh = elem.attr('sh'); 
     console.log(sh); // <-- should log false only once, not twice 
     return sh; 
     } 


    }; 

    return directive; 

}); 

あなたはattrからsh値を読んで、そうすることによって、それは文字列になるためのdivが表示されている理由は、問題があるHTML

<mydir></mydir> 
+0

このリンクを参照してくださいhttp://stackoverflow.com/questions/27025075/ng-show-called-multiple-times –

答えて

1

wrap.attr('sh', sh); 

この行は、実際に"false"に属性sh(文字列)とないfalseを設定します。そしてget関数elem.attr('sh');"false"を文字列として返します。そして、空ではない文字列はjavascriptでは真実であるため、真であると評価されます。

は交換してください:

var sh = elem.attr('sh'); 

文字列の比較で:

var sh = (elem.attr('sh') == "true"); 

、それはショーが二回行動を意図していると呼ばれる

を動作するはずです。詳細はこちらをご覧ください: Controller function getting called twice using ng-show

関連する問題