Change scope variable from directive in angularJS

Question

I am pretty new with Angular and I got the following problem:

I have a list view and a details view with some tags. I created a directive in order to change the route (to list view) and load new elements from a service on the click event. What I want is that the click event also change a scope variable, so that i can show/hide a button to clear filters in the list view.

Actually I am able to change the variable from the directive, but the button doesn't show/hide with ngIf/ngShow/ngHide when the variable changes.

I tried with $scope.$apply, both in the directive and in the controller. I tried calling a toggle function from the controller and to change the variable directly inside the directive, but nothing worked.

I tried calling the toggle function from another button and it worked perfectly!

Here is my code:

Here i try to change the variable in the directive and $apply:

.directive('filterTag', function(getFeed, $location) {
    return {
        restrict: 'A',
        controller: 'mainController',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                $location.path('/list');
                scope.filtered = true;
                scope.$apply();
                return getFeed.getTagged(this.text);

            });
        }
    }
})

This is inside the controller:

$scope.filtered = false;
$scope.toggleFiltered = function() {
    $scope.filtered = !$scope.filtered;
}

$scope.$watch('filtered', function() {
    alert('filtered: ' + $scope.filtered);
});

I use $watch to be sure the variable changed correctly and it does, both from directive and from toggle button.

Here is the button i want to show/hide if filters are applied (this is in the list view):

<button type="button" ng-show="filtered">Clear filter</button>

I tried to add this button to check if I was missing something or for syntax errors, but it works perfectly

<button type="button" ng-click="toggleFiltered()">toggle filter</button>

I looked for answers in the last two days but I couldn't find the solution. Can't figure out the problem with my code.

Working example here

could you upload your code to Jsfiddle or plunker to help you? — Bassam Rubaye
– Bassam Rubaye, Commented Nov 29, 2015 at 21:33
Do you want to show /hide the 'clear filter' button , or another button ? — Bassam Rubaye
– Bassam Rubaye, Commented Nov 29, 2015 at 22:31
I want to show/hide the clear filter button. I added the other one just to check the toggle function worked — Iecya
– Iecya, Commented Nov 29, 2015 at 22:32

Bassam Rubaye · Accepted Answer · 2015-11-29 23:26:14Z

1

you can share the 'filtered' between two controllers (different scopes), so you can use $rootScope to do that or you can use a service/factory in this way when the 'filtered' is changed in any controller it will change in the other!

Use the $rootScope.filtered instead of $scope.filtered and you can initialize the $rootScope.filtered in the run() function at the module.

edited Nov 29, 2015 at 23:26

answered Nov 29, 2015 at 23:19

Bassam Rubaye

3021 silver badge4 bronze badges

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

Collectives™ on Stack Overflow

Change scope variable from directive in angularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related