pass ng-class condition in angular directive

Question

I have a directive:

angular.module("App").directive('myDirective', function () {
    return {
        restrict: "E",
        },            
        templateUrl: "MyDirective.html"
    }
});

Template:

<input Value = "Test" ng-class="{{ngclass}}"/>

HTML:

<my-Directive ng-class="{'ng-invalid': param === false }"/>

Is it possible to pass the ng-class condition into the directive?

Thanks

Answer 1

You can use scope option for this, example:

angular.module('myApp', [])
.controller('MyCtrl', ['$scope', '$timeout', function MyCtrl($scope, $timeout) {
    var ctrl = this;
    
    ctrl.testTrue = true;
    ctrl.testFalse = false;
    
    $timeout(function(){
      ctrl.testFalse = true;
    }, 3000);
    
    return ctrl;
}])
.directive('myDirective', [function () {
        var myDirective = {
            restrict: 'E',
            scope: {
              ngClass: '='
            },
            template: "<input Value = 'Test' ng-class='ngClass'/>"
        }
        return myDirective;
}]);

.ng-test-false {
    border: 1px solid red;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.angularjs.org/1.6.2/angular.js"></script>

<div ng-app="myApp">
  <div ng-controller="MyCtrl as $ctrl">

      <my-Directive ng-class="{'ng-invalid': true, 'ng-test-true':  $ctrl.testTrue, 'ng-test-false': $ctrl.testFalse}"/>
  
  </div>
</div>