Passing dynamic variables into controller function through directive

Question

My angular app has a directive that needs to handle sorting of results. I have a couple static columns where the sorting works fine. The rest of the columns are generated with a directive as it repeats for every header in the data list.

Here is the main template code which works:

<a href="#" ng-click="orderByField='status'; reverseSort = !reverseSort">
    <span class="glyphicon glyphicon-sort" aria-hidden="true" ng-show="orderByField !== 'status'"></span>
    <span class="glyphicon glyphicon-sort-by-attributes" aria-hidden="true" ng-show="reverseSort && orderByField === 'status'"></span>
    <span class="glyphicon glyphicon-sort-by-attributes-alt" ng-show="!reverseSort && orderByField === 'status'" aria-hidden="true"></span>
</a>

Here is the code from the main template which invokes the directive to ng-repeat:

<th ng-repeat="attribute in ctrl.attributes" attribcol="attribute" sort="attributeSort(orderByField,reverseSort)" reverse="reverseSort" orderby="orderByField" class="mps-attribute-cell topNoScroll" attribute-load-event></th>

Here is the template code from the directive, which is not working:

<a href="#" ng-click="sort('paValues.'+attribute.id+'_search_value', reverse);">
    <span class="glyphicon glyphicon-sort" aria-hidden="true" ng-show="orderby !== 'paValues.'+attribute.id+'_search_value'"></span>
    <span class="glyphicon glyphicon-sort-by-attributes" aria-hidden="true" ng-show="reverse && orderby === 'paValues.'+attribute.id+'_search_value'"></span>
    <span class="glyphicon glyphicon-sort-by-attributes-alt" ng-show="!reverse && orderby === 'paValues.'+attribute.id+'_search_value'" aria-hidden="true"></span>
</a>

A couple things going on here. The first example is sorting on a property directly on the data objects. The one inside the directive is sorting on a nested property. (paValues is an object list belonging to the data object, and I need to sort on a specific property found in paValues).

Here is the code for my directive:

angular.module('myApp')
.directive('attribcol', [function () {
        return {
            restrict: "A",
            scope: {
                attribute: "=attribcol",
                reverse: "=",
                orderby: "=",
                sort: "&"
            },
            templateUrl: "../app/templates/directives/attribcol.html"
        };
    }]);

And here is the code for the function in the controller that I'm using so my directive can actually change the main $scope variables. (I'm trying to avoid using $rootScope in the interest of doing this the correct way.)

$scope.attributeSort = function(field, reverse) {
    console.log("field: " + field + ", reverse: " + reverse)
    $scope.orderByField = field;
    $scope.reverseSort = reverse;
};

Bottom line: I need to set $scope.oderByField and $scope.reverseSort when I click the sorting icons in the directive. I know I am close, but something is missing to bind my sort function to the attributeSort function in the controller.

shaunhusain · Accepted Answer · 2015-04-29 19:44:25Z

Give this a try:

angular.module('myApp')
.directive('attribcol', [function () {
        return {
            restrict: "A",
            scope: {
                attribute: "=attribcol",
                reverse: "=",
                orderby: "=",
                sort: "&"
            },
            link: function(scope){
                scope.dirSort = function(attrId, reverse){
                    scope.sort({
                        orderByField: 'paValues.'+attrId+'_search_value',
                        reverseSort:reverse
                    })
                }
            },
            templateUrl: "../app/templates/directives/attribcol.html"
        };
    }]);

HTML

<a href="#" ng-click="dirSort(attribute.id, reverse)">
    <span class="glyphicon glyphicon-sort" aria-hidden="true" ng-show="orderby !== 'paValues.'+attribute.id+'_search_value'"></span>
    <span class="glyphicon glyphicon-sort-by-attributes" aria-hidden="true" ng-show="reverse && orderby === 'paValues.'+attribute.id+'_search_value'"></span>
    <span class="glyphicon glyphicon-sort-by-attributes-alt" ng-show="!reverse && orderby === 'paValues.'+attribute.id+'_search_value'" aria-hidden="true"></span>
</a>

Updated Had a few errors I think are corrected now. Updated again missing a comma in the directive definition object.

Excellent! This worked to get the directive to change the value of the $scope variables. Now I am going to have to figure out why my nested property sort isn't working. But that is a separate issue.
Update: the link function is actually not necessary. The issue was with the syntax of the bound function. The same result can be accomplished by simply changing the ng-click to ng-click="sort({orderByField:attribute.id, reverseSort:!reverse});"

Collectives™ on Stack Overflow

Passing dynamic variables into controller function through directive

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related