Функция вызова в директиве при изменении переменных родительского диапазона

Question

Мне нужно вызвать функцию в моей директиве, когда изменяется значение переменной в родительском контроллере. Я попытался добавить часы (я, очевидно, делаю это неправильно), потому что ничего не происходит, когда изменяется значение. Вот директива:

angular.module('ssq.shared').directive('checkboxPicklist', function() { 
    return { 
     restrict: 'E', 
     templateUrl: '/Scripts/app/Shared/directives/checkboxPicklist.html', 
     replace: true, 
     scope: { 
      itemId: '=', 
      list: '=', 
      nameProp: '=', 
      title: '@', 
      searchPlaceholder: '@', 
      callbackFn: '&', 
      callMore: '&', 
      clear: '=' 
     }, 

     link: function (scope, element, attrs) { 
      scope.query = ''; 
      var parent = scope.$parent; 
      var clear = parent.clear; 
      scope.$watch(clear, function() { 
       if (clear == true) { 
        this.clearAll(); 
       } 
      }) 
      var child = element.find('.dropdown-menu'); 
      child.on({ 
       'click': function (e) { 
        e.stopPropagation(); 
       } 
      }); 


      var selectedItemFn = function (item) { 
       return item.selected; 
      }; 

      scope.getSelectedCount = function() { 
       return _.filter(scope.list, selectedItemFn).length; 
      }; 
      scope.loadMore = function() { 
       scope.callMore(); 
      }; 

      scope.allSelected = function(list) { 
       var newValue = !scope.allNeedsMet(list); 
       _.each(list, function(item) { 
        item.selected = newValue; 
        scope.callbackFn({ object: item }); 
       }); 
      }; 

      scope.allNeedsMet = function(list) { 

       var needsMet = _.reduce(list, function(memo, item) { 
        return memo + (item.selected ? 1 : 0); 
       }, 0); 
       if (!list) { 
        return (needsMet === 0); 
       } 
       return (needsMet === list.length); 
      }; 

      function clearAll() { 
       _.each(list, function (item) { 
        item.selected = false; 
       }) 
      } 
     } 

    }; 
}); 

Вот где я пытаюсь смотреть переменную:

  var parent = scope.$parent; 
      var clear = parent.clear; 
      scope.$watch(clear, function() { 
       if (clear == true) { 
        this.clearAll(); 
       } 
      }) 

Здесь функция в моем родительском контроллере, который изменяет значение «прозрачного»

$scope.clearFilters = function (clear) { 

    $scope.clear = true; 

    $scope.form.selected.services = []; 
    $scope.form.picked.areas = []; 
    $scope.form.certified.verifications = []; 
    $scope.form.subscribed.subscriptions = []; 
    $scope.form.OperatorBusinessUnitID = null; 
    $scope.form.OperatorBusinessUnitID = null; 
}; 

Я попытался установить атрибут «clearFilter» и присвоить ему переменную, но часы все еще не срабатывают:

  scope.$watch(attrs.clearFilter, function (value) { 
       if (value == true) { 
        this.clearAll(); 
       } 
      }); 

          <checkbox-picklist data-item-id="'servicesPicklist'" 
              data-search-placeholder="Search Services" 
              data-list="services" 
              data-title="Service(s)" 
              data-name-prop="'vchDescription'" 
              data-callback-fn="addService(object)" 
              call-more="loadMoreServices()" 
              clear-filter="clear"> 

         </checkbox-picklist> 

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

EDIT: То, что я обнаружил, это нормальная сфера $ часы («ясно», функция ...) не работает, кажется, потому что директива в «ssq.shared» модуль, который впрыскивается в моей. мой основной модуль «myModule» (см. ниже), поэтому, хотя на странице, на которой работает директива, используется мой «GeneralSearchCtrl», я не могу заставить часы работать с переменной, находящейся в «GeneralSearchCtrl». Если я использую scope. $ Parent.clear Я могу видеть значение переменной, но я не могу показать ей часы.

Мой код модуля впрыска:

var app = angular.module('myModule', ['ui.bootstrap', 'checklist-model', 'ssq.shared', 'ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.pagination', 'ui.grid.selection', 'ui.grid.exporter', 'ui.grid.autoResize', 'ui.router', 'cgBusy', 'ui.mask', 'ngFileUpload', 'ngSanitize']); 

страница, где директива живет использование:

<div ng-app="myModule" ng-controller="GeneralSearchCtrl"> 

Я не могу получить часы на переменной, расположенной в GeneralSearchCtrl.

Любая помощь очень ценится !!!!

Answer 1

Как оказалось, проблема заключалась в том, что директива была scope:{...} в его определении, которое остановило «нормальный» scope.$watch('clear', function...) от работы.Я должен был добавить ясно: «=» в списке Область, как так:

  replace: true, 
     scope: { 
      itemId: '=', 
      list: '=', 
      nameProp: '=', 
      title: '@', 
      searchPlaceholder: '@', 
      callbackFn: '&', 
      callMore: '&', 
      clear: '=' 
     }, 

Тогда ясно = «ясно» к директиве, как так:

      <checkbox-picklist data-item-id="'servicesPicklist'" 
              data-search-placeholder="Search Services" 
              data-list="services" 
              data-title="Service(s)" 
              data-name-prop="'vchDescription'" 
              data-callback-fn="addService(object)" 
              call-more="loadMoreServices()" 
              clear="clear"> 

         </checkbox-picklist> 

Тогда в директиве я должен был добавить часы, как это для него работа:

   scope.$watch('$parent.clear', function (newValue, oldValue) { 
       if (newValue == true) { 
       clearAll(); 
       alert('it works!'); 
       } 
      }) 

Я действительно надеюсь, что это помогает кто-то еще, как это было трудно для меня, чтобы выяснить. Счастливое кодирование!

Answer 2

Добавить часы для значения области действия $ и вызвать функцию,

scope.$watch('clear', function(newValue, oldValue) { 
if (newValue) { 
    this.clearAll(); 
} 
}); 

Answer 3

scope.$watch(clear, function() { 
    if (clear == true) { 
    this.clearAll(); 
    } 
}) 

This.clearAll() не существует в рамках вашей функции $ часов. Просто вызов clearAll() должен работать лучше.

Неправильная версия signature of the watch function.

scope.$watch('clear', function (new, old) {}