Изменения область переменный из директивы в angularJS

Question

Я довольно новый с Угловым и я получил следующую задачу:

У меня есть мнение списка и деталь просмотра с некоторыми тегами. Я создал директиву для изменения маршрута (в виде списка) и загрузки новых элементов из службы в событие click. Я хочу, чтобы событие click также изменило переменную области видимости, чтобы я мог показать/скрыть кнопку, чтобы очищать фильтры в представлении списка.

Фактически я могу изменить переменную из директивы, но кнопка не показывает/скрывает с ngIf/ngShow/ngHide при изменении переменной.

Я пробовал с $scope.$apply, как в директиве, так и в контроллере. Я попытался вызвать функцию toggle с контроллера и изменить переменную непосредственно внутри директивы, но ничего не получилось.

Я попытался вызвать функцию переключения с другой кнопки, и она отлично работала!

Вот мой код:

Здесь я пытаюсь изменить переменную в директиве и $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); 

      }); 
     } 
    } 
}) 

Это внутри контроллера:

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

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

я использую $ часы чтобы убедиться, что переменная изменена правильно, и это происходит, как из директивы, так и из кнопки переключения.

Вот кнопка я хочу, чтобы показать/скрыть, если применяются фильтры (это в виде списка):

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

Я пытался добавить эту кнопку, чтобы проверить, если я что-то или синтаксиса отсутствует ошибки, но он отлично работает

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

Я искал ответы за последние два дня, но не смог найти решение. Не могу решить проблему с моим кодом.

Рабочий пример here

Answer 1

вы можете поделиться «фильтруется» между двумя контроллерами (различные области применения), так что вы можете использовать $rootScope, чтобы сделать это, или вы можете использовать service/factory таким образом, когда «фильтруется» изменяется в любом контроллере он изменится в другом!

Используйте $ rootScope.filtered вместо $ scope.filtered, и вы можете инициализировать $ rootScope.filtered в функции run() в модуле.