Question

我有“丑陋”按钮，看起来像这样（我需要这样做，没有禁用ng）：

<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从控制器激活功能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/

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

1 个答案:

更新1

更新2