Setting a scope variable from a directive with AngularJS

Question

I've gone through what must be 20 similar questions asked on SO but have yet to find a solution for my situation, so I hope you guys can help me out.

The goal is to sort the list of names by the property that's provided in the "sort-type" attribute of the directive, but only for the list within each controller (not all lists at the same time).

HTML

<div ng-controller="TestController as testOne">
   <b>By:</b> {{testOne.sortType}}<br>
   <b>Reverse:</b> {{testOne.sortReverse}}<br>
   <div ng-repeat="item in testOne.list">
       <p table-sort sort-type="name" sort-reverse="false"><a href="#">Sort by name</a></p>
       <ul>
           <li ng-repeat="childItem in testOne.childList | orderBy:testOne.sortType">{{childItem.name}}</li>
       </ul>
   </div>
</div>

<br><br>

<div ng-controller="TestController as testTwo">
   <b>By:</b> {{testTwo.sortType}}<br>
   <b>Reverse:</b> {{testTwo.sortReverse}}<br>
   <div ng-repeat="item in testTwo.list">
       <p table-sort sort-type="name" sort-reverse="false"><a href="#">Sort by name</a></p>
       <ul>
           <li ng-repeat="childItem in testTwo.childList | orderBy:testTwo.sortType">{{childItem.name}}</li>
       </ul>
   </div>
</div>

Javascript (Angular)

var app = angular.module('demo', []);

app.controller('TestController', TestController);

function TestController() {
    var vm = this;

    vm.sortType    = 'oldOrder';
    vm.sortReverse = false;

    vm.list      = [1];
    vm.childList = [{ name: 'Jimmy' },
                    { name: 'Danny' },
                    { name: 'Bobby' }];
}

/////////////////////////////////////

app.directive('tableSort', tableSort);

function tableSort() {

    var directive = {
        restrict: 'A',
        link: linkFunc,
    };

    return directive;

    function linkFunc(scope, element, attr) {
        element.on('click', function() {
            if(scope.sortType === attr.sortType) {
                scope.sortReverse = !scope.sortReverse;
            } else {
                scope.sortType = attr.sortType;
            }
        });
    }

}

JSFiddle here

My actual application is a bit more complex but I've tried to abstract it as much as possible.

Thanks for looking :)

Dayan Moreno Leon · Accepted Answer · 2016-04-07 03:27:41Z

1

Ok Several things going on here:

you are using the controllerAs syntax on your templates but you are changing scope variables in your directive. hence your controller variables are never changed.
your directive is inside of the ng-repeat which means that you are actuating actually on a child scope so if you are setting variables directive on the scope your ng-repeat won't be able to reach them because they are being set after the child scope are created.
you are using element.on which executes outside of angular digest which means you would have to call scope.$apply to let angular know that something happened.

Take a look at this https://jsfiddle.net/rez8ey12/

i hope it helps

answered Apr 7, 2016 at 3:27

Dayan Moreno Leon

5,4552 gold badges25 silver badges24 bronze badges

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

1 Comment

Daan Geerdink Over a year ago

This works pretty well for me. Thanks for taking the time to help out!

Collectives™ on Stack Overflow

Setting a scope variable from a directive with AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related