Связывание показывает в пользовательской директиве

Question

Связывание показывает в пользовательской директиве

0

В заголовке <table> где метки можно щелкнуть, чтобы упорядочить данные определенным образом, я пытаюсь заменить этот код:

<th>
  <a class="sortable-th" href="#" data-ng-click="sortType = 'atSenderScheduledDate'; sortReverse = !sortReverse">
    Date
    <span data-ng-show="sortType == 'atSenderScheduledDate' && !sortReverse" class="md-chevron-down"></span>
    <span data-ng-show="sortType == 'atSenderScheduledDate' && sortReverse" class="md-chevron-up"></span>
  </a>
</th>

(где отображается только один <span> чтобы показать порядок сортировки) с пользовательской директивой, такой как:

<th>
  <th-sortable type="atSenderScheduledDate" label="Date"></th-sortable>
</th>

Контроллер содержит переменные сортировки:

$scope.sortType = 'atSenderScheduledDate'; // set the default sort type
$scope.sortReverse = false;  // set the default sort order

И директива такова:

(function() {

  angular.module('app').directive('thSortable', thSortable);

  thSortable.$inject = ['$parse'];

  function thSortable($parse) {
    return {
      restrict : 'E',
      scope : {
      },
      link : function(scope, elem, attrs) {
        var type = attrs.type;
        var label = attrs.label;

        var newElem = '';
        newElem += '<a class="sortable-th" href="#">';
        newElem += '  ' + label;
        newElem += '  <span class="md-chevron-up" data-ng-show="sortType === \'' + type + '\' && !sortReverse"></span>';
        newElem += '  <span class="md-chevron-down" data-ng-show="sortType === \'' + type + '\' && sortReverse"></span>';
        newElem += '</a>';
        elem.append(newElem);

        elem.bind('click', function() {
          scope.$apply(function() {
            $parse("sortType").assign(scope.$parent, type);
            $parse("sortReverse").assign(scope.$parent, !scope.$parent.sortReverse);
          });
        });
      }
    };
  }
})();

Связывание click работает так, как ожидалось, и данные точно упорядочиваются. Тем не менее, я не могу получить часть data-ng-show из двух <span> работающих, чтобы отображать только соответствующие.

Любая помощь будет оценена, спасибо.

Blablalux 01 июнь 2016, в 16:07

Источник

Теги:

javascript

angularjs

angularjs-directive

1 ответ

Ещё вопросы

Thalaivar · Answer 1 · 2016-06-01T10-40-00.000Z

elem.bind('click', function() {
   scope.$apply(function() {
     $parse("sortType").assign(scope.$parent, type);
     $parse("sortReverse").assign(scope.$parent, !scope.$parent.sortReverse);
   });
});

Вы используете $parse("sortType") и $parse("sortReverse"), не знаете, как он обновит parent scope properties. Поскольку ваша директива является областью изоляции, почему бы вам не потянуть их в свой объем, как показано ниже, и использовать его.

 scope : {
     sortType: "=",
     sortReverse: "="
 },

Затем в вашей функции ссылок вы можете использовать scope.sortType и scope.sortReverse а также гораздо лучше отправить object в ng-model виде boolean значений, чтобы создать целую new scope inside your directive.

Привет, спасибо за ваш ответ. Я думаю, что родительская область успешно обновлена, поскольку сортировка выполняется должным образом. Мне кажется, что мне не хватает правильного синтаксиса для newElem += ' <span class="md-chevron-up" data-ng-show="sortType === \'' + type + '\' && !sortReverse"></span>'; часть директивы.