Join the Stack Overflow Community
Stack Overflow is a community of 6.8 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

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

share|improve this question
    
could you upload your code to Jsfiddle or plunker to help you? – Bassam Rubaye Nov 29 '15 at 21:33
    
here my code: plnkr.co/edit/5cdbLR24CRssktS5COho?p=preview – Iecya Nov 29 '15 at 21:41
    
Do you want to show /hide the 'clear filter' button , or another button ? – Bassam Rubaye Nov 29 '15 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 Nov 29 '15 at 22:32
up vote 1 down vote accepted

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.

share|improve this answer
    
great! It worked =D thank you very much! – Iecya Nov 29 '15 at 23:33

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.