CODEWITHSUNDEEP
angularjssyntaxangularjs-directive
Kepedizer
Kepedizer

Reputation: 856

passing functions and scope vars to directive in an object

I wrote a directive which looks like this:

on parent html:

      <cl-sort-n-reverse flip-reverse="flipReverse()" set-key="setKey(key)" sort-key="sortKey"          rev="reverse" key="body" title="Content"></cl-sort-n-reverse>

in directive js: 

.directive('clSortNReverse', function () {
    return {
        restrict: 'E',
        scope:{
            innerKey : '@key',
            title : '@title',
            inReverse: '=rev',
            sortKey:'=',
            flipReverse:'&',
            setKey:'&'

        },
        transclude :true,
        templateUrl:'../devhtml/common/sortNReverse.html',
        link: function (scope, element, attrs) {

        }
    };
});

in template:

   <span>
      <div class="btn" ng-if="sortKey!=innerKey" data-ng-click="setKey({key:innerKey});">
        {{title}}
     </div>
     <div class="btn" ng-if="sortKey==innerKey" data-ng-click="flipReverse();">
        <b>{{title}}</b>
        <i ng-if="inReverse===true" class="fa fa-caret-up"></i>
        <i ng-show="inReverse===false" class="fa fa-caret-down"></i>
    </div>
</span>

I would really like to be able to insert both functions ans scope level vars like sortKey and reverse to attribute inside one object I can declare in my controller. the answers I found here regarding adding objects to directive attributes all dealt with a simpler case in which the objects encapsulates only simple string or numbers. I'm stumped at how to define that options objects to include $scope level stuff

Upvotes: 0

Views: 65

Answers (1)

Wawy
Wawy

Reputation: 6269

Is this what you meant?

In your controller:

$scope.sortReverseConfig = {
  flipReverse: function() {...},
  setKey: function(key) {...},
  sortKey: '',
  innerKey: $scope.body,
  inReverse: $scope.reverse,
  title: $scope.content
}

In your html:

<cl-sort-n-reverse config="sortReverseConfig"></cl-sort-n-reverse>

Directive:

.directive('clSortNReverse', function () {
    return {
        restrict: 'E',
        scope:{
          config: '='
        },
        transclude :true,
        templateUrl:'../devhtml/common/sortNReverse.html',
        link: function (scope, element, attrs) {

        }
    };
});

Directive template:

<span>
  <div class="btn" ng-if="config.sortKey != config.innerKey" data-ng-click="config.setKey({key:config.innerKey});">
    {{config.title}}
  </div>
  <div class="btn" ng-if="config.sortKey == config.innerKey" data-ng-click="config.flipReverse();">
     <b>{{config.title}}</b>
     <i ng-if="config.inReverse === true" class="fa fa-caret-up"></i>
     <i ng-show="config.inReverse === false" class="fa fa-caret-down"></i>
  </div>
</span>

Upvotes: 1

Related Questions