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() 都不起作用（我应该从函数名中去掉 '()' 并让函数给出函数引用而不是函数调用吗？）。

我是否应该使用隔离范围，我目前没有这样做，因为据我所知，这将创建多个脏检查（观察者）实例，而不仅仅是一个。

4

1 回答 1

0

假设您的代码中有这种结构：

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

一种方法是在指令中添加一个 templateUrl 属性，以包含一个包装标准按钮并添加 ng-disabled 的模板。然后，您可以利用每个按钮的 ng-disabled 行为，而无需将其添加到每个按钮。缺点是您必须将样式和其他属性放在“外部”指令而不是按钮本身上。

所以，上面的代码会变成这样：

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