javascript - 如何在 AngularJS 自己的指令中使用 ng-class 和函数？

Question

我有一个看起来像这样的“丑陋”按钮(我需要以这种方式完成，没有禁用 ng-disabled):

<button uib-tooltip="some text" ng-class="!result.checkStatus === true ? 'disabled' : ''"  ng-click="!result.checkStatus  === true ? '' : DoSomething(result)"> </button>

如果 !result.checkStatus === true 则按钮被禁用并且 ng-click 不起作用。在其他情况下启用并且 ng-click 从 Controller 激活函数 DoSomething(result)。

一切正常。但我想为此做指令。我该怎么做？

这是我已经做过的:

<button uib-tooltip="some text" my-own-directiv func="DoSomething(result)" param="result.checkStatus"> </button> 

指令:

angular.module("mod").directive("myOwnDirectiv", function () {
    return {
        restrict: "AE",
        scope: {
            param: "=",
            func: "&"
        },
        template: " ng-class='!{{param}} === true ? 'disabled' : '' '  ng-click='!{{param}}  === true ? '' : func()' "

    };
});

我知道这行不通，但我只是想表明我的意思。

Answer 1

请检查:JSFiddle

像这样创建你的指令:

angular.module('Joy', [])
  .controller("JoyCtrl", ['$scope', function($scope) {
    $scope.isActive = true;
    $scope.myHandler = function() {
      alert('myHandler is invoked');
    }
  }])
  .directive('myButton', function() {
    return {
      scope: {
        active: '=',
        handler: '&'
      },
      template: '<button ng-class="{disabled: !active}" ng-click="onClick()">Click me</div>',
      controller: ['$scope', function($scope) {
        $scope.onClick = function() {
          if ($scope.active) {
            $scope.handler();
          }
        };
      }]
    };
  })

像这样使用它:

<div ng-app="Joy" ng-controller="JoyCtrl">
  Active:
  <my-button active="isActive" handler="myHandler()"></my-button>
  <br> Disabled:
  <my-button active="!isActive" handler="myHandler()"></my-button>
</div>

更新1

这是带有工具提示的更新版本:https://jsfiddle.net/asahcmz5/2/

更新2

如何将 class 传递给指令:https://jsfiddle.net/asahcmz5/4/