CODEWITHSUNDEEP
angularjsangularjs-directive
anil singh butola
anil singh butola

Reputation: 119

How get col value on ng-click directive and bind with scope.info

<grid-sort col="lMember_id" variable="lMember_id"></grid-sort>

directive

app.directive("gridSort", function () {
    return {
        template:
          '<button  ng-click="Direction=-1;SetSortValue();orderBy();" ng-init="info.CurrentPage=0"><i class="fa-angle-double-up fa"></i></button>' +
          '<button  ng-click="Direction=1; SetSortValue();orderBy();" ng-init="info.CurrentPage=1000"><i class="fa-angle-double-down fa"></i></button>'
        ,
        link: function (scope, element, attrs) {
            scope.SetSortValue = function () {   
                if (scope.Direction == -1) {
                    scope.info.CurrentPage = 0;
                    scope.info.Direction = 'Asc';

                }
                else if (scope.Direction == 1) {
                    scope.info.Direction = 'Desc';
                    scope.info.CurrentPage = 1000;

                }
            }
        }
    };
});

my controller on ng-click

$scope.orderBy = function () {
   var data = $scope.info;
   Request.GetTabledata("SelectMemberData", data, $scope, true);
};

I want to bind col attribute value with scope.info.colname.. When I declare scope then orderBy() method not working. when i am not declare scope all method working but i don't able to get col value

Upvotes: 0

Views: 48

Answers (1)

davidkonrad
davidkonrad

Reputation: 85578

Update: Ah, now I see what you are trying to achieve! Your approach could work if you only are using the directive once - but since you are using it multiple times you end up overriding both your directive attributes and your $scope variables.

You can solve this by using a child scope, i.e: Instead of mingling with the parent scope, hold your variables and methods internally or "local" to each instance of the directive.

Here is a refactored version of the directive using a child scope which only updates the child scopes' $parent info, that is your main $scope :

.directive("gridSort", function() {
  return {
    template: 
      '<button  ng-click="Direction=-1;SetSortValue();orderBy();" ng-init="info.CurrentPage=0"><i class="fa-angle-double-up fa"></i>xx</button>' +
      '<button  ng-click="Direction=1; SetSortValue();orderBy();" ng-init="info.CurrentPage=1000"><i class="fa-angle-double-down fa"></i>xx</button>'
    ,
    scope: {
      col: '@',
      variable: '@',
    },
    controller: function($scope) {
      $scope.info = {
        colName: $scope.col
      }
      $scope.SetSortValue = function() {
        if ($scope.Direction == -1) {
          $scope.info.CurrentPage = 0;
          $scope.info.Direction = 'Asc';
        } else if ($scope.Direction == 1) {
          $scope.info.Direction = 'Desc';
          $scope.info.CurrentPage = 1000;
        }
        $scope.$parent.info = $scope.info;
      }
    },
    link: function(scope, element, attrs) {
      //any additional processing
    }
  };
});
  1. Declare a child scope simply by adding a scope: {} literal to the directive
  2. All references in the template now points to this child scope
  3. Work on the child scope in controller: function($scope {}
  4. Target your controllers $scope through $scope.$parent

demo -> http://next.plnkr.co/edit/uxiHC9jgebgJc3DW

Upvotes: 1

Related Questions