1

アクティブなユーザーのみが利用できるボタンの特定のグループ (これらのボタンで ngClick を使用しています) を無効にし、アカウントが実際にアクティブであることを確認するリクエストが解決された後に再度有効にしたいと思います。

私の現在の実装は次のとおりです。

directive('activeCompanyButton', function(authService, companyService) {
    var defualtFunction = function(e){
      e.preventDefault();
    };
    function bind(elem){
      elem.addClass('disabled');
      elem.bind('click', defualtFunction);
    }
    function unbind(elem){
     elem.removeClass('disabled');
     elem.unbind('click', defualtFunction);
    }
    return{
      // scope: false,
      link: function(scope, elem, attrs){
        bind(elem);
      },
      controller: function($scope, $element, $attrs, authService, companyService){
        function checkCompanyStatus(val){
          var company = val;
           var r = company && company.status == 'active';  
           return r;
        }
        $scope.$watch(function(){return companyService.getCompanyData(authService.getCompanyId())}, function(val){
          console.log(val);
          if(checkCompanyStatus(val)){
            unbind($element);
            $element.bind('click', $scope.$eval($attrs.ngClick));
          }
          else{
            bind($element);
          }
        });
      }
    }
});

$scope.$eval() でさえ機能していません (関数名から「()」を取り除き、関数を残して、関数呼び出しではなく関数参照を与える必要がありますか?)。

Isolateスコープを使用する必要がありますが、現在はそうしていません.1つだけではなく、ダーティチェック（ウォッチャー）の複数のインスタンスを作成することを理解している限りです。

4

1 に答える 1

0

コードで次の構造を想定します。

<active-company-button>
    <button style="custom" other="blah" />
</active-company-button>

これを行う 1 つの方法は、templateUrl プロパティをディレクティブに追加して、標準ボタンをラップし、ng-disabled を追加するテンプレートを含めることです。その後、各ボタンに追加することなく、すべてのボタンに対して ng-disabled の動作を利用できます。欠点は、ボタン自体ではなく、「外部」ディレクティブにスタイリングとその他のプロパティを配置する必要があることです。

したがって、上記のコードは次のようになります。

<active-company-button style="custom" other="blah" />
于 2013-10-25T01:59:16.983 に答える