How to use ng-class and function in own directive in AngularJS?

Question

I have "ugly" button which looks like this (I need to do it in this way, without ng-disabled):

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

If !result.checkStatus === true then button is disabled and ng-click doesn't work. In other case is enabled and ng-click activates function DoSomething(result) from the controller.

Everything works fine. But i'd like to do directive for this. How can I do this?

This is what I did already:

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

Directive:

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

    };
});

I know that it won't work but I just wanted to show what I mean.

You can not use template here. Because the template will be rendered inside the element you applied the attribute directive to. — Sebastian Sebald
– Sebastian Sebald, Commented Aug 25, 2016 at 9:41

Joy · Accepted Answer · 2016-08-25 10:10:16Z

3

Please check: JSFiddle

Create your directive like:

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();
          }
        };
      }]
    };
  })

And use it like:

<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>

Update 1

Here is the updated version with tooltip: https://jsfiddle.net/asahcmz5/2/

Update 2

How to pass class into directive: https://jsfiddle.net/asahcmz5/4/

edited Aug 25, 2016 at 10:10

answered Aug 25, 2016 at 9:41

Joy

9,60011 gold badges50 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DiPix Over a year ago

But tooltip won't work there uib-tooltip="some text"

Joy Over a year ago

It is not the problem related to the directive definition itself. It should be another question. But here you go: JSFiddle with tooltip

DiPix Over a year ago

Now I think template it's a wrong approach for me. Because if I would add anything e.g. class=" " then I have to add it in directive. I'd like to use it on existing button, in this way: <button class="btn btn-default" active="!isActive" handler="myHandler()"></button>

Collectives™ on Stack Overflow

How to use ng-class and function in own directive in AngularJS?

1 Answer 1

Update 1

Update 2

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update 1

Update 2

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related