Установка переменной области видимости из директивы с AngularJS

Question

Я прошел через то, что должно быть 20 одинаковых вопросов, заданных на SO, но пока не найти решение для моей ситуации, поэтому я надеюсь, что вы, ребята, можете мне помочь.

Цель состоит в том, чтобы отсортировать список имен по свойству, указанному в атрибуте «тип сортировки» директивы, но только для списка внутри каждого контроллера (не все списки одновременно).

HTML

<div ng-controller="TestController as testOne"> 
    <b>By:</b> {{testOne.sortType}}<br> 
    <b>Reverse:</b> {{testOne.sortReverse}}<br> 
    <div ng-repeat="item in testOne.list"> 
     <p table-sort sort-type="name" sort-reverse="false"><a href="#">Sort by name</a></p> 
     <ul> 
      <li ng-repeat="childItem in testOne.childList | orderBy:testOne.sortType">{{childItem.name}}</li> 
     </ul> 
    </div> 
</div> 

<br><br> 

<div ng-controller="TestController as testTwo"> 
    <b>By:</b> {{testTwo.sortType}}<br> 
    <b>Reverse:</b> {{testTwo.sortReverse}}<br> 
    <div ng-repeat="item in testTwo.list"> 
     <p table-sort sort-type="name" sort-reverse="false"><a href="#">Sort by name</a></p> 
     <ul> 
      <li ng-repeat="childItem in testTwo.childList | orderBy:testTwo.sortType">{{childItem.name}}</li> 
     </ul> 
    </div> 
</div> 

Javascript (Угловое)

var app = angular.module('demo', []); 

app.controller('TestController', TestController); 

function TestController() { 
    var vm = this; 

    vm.sortType = 'oldOrder'; 
    vm.sortReverse = false; 

    vm.list  = [1]; 
    vm.childList = [{ name: 'Jimmy' }, 
        { name: 'Danny' }, 
        { name: 'Bobby' }]; 
} 

///////////////////////////////////// 

app.directive('tableSort', tableSort); 

function tableSort() { 

    var directive = { 
     restrict: 'A', 
     link: linkFunc, 
    }; 

    return directive; 

    function linkFunc(scope, element, attr) { 
     element.on('click', function() { 
      if(scope.sortType === attr.sortType) { 
       scope.sortReverse = !scope.sortReverse; 
      } else { 
       scope.sortType = attr.sortType; 
      } 
     }); 
    } 

} 

JSFiddle here

Мой фактическое применение является немного более сложным, но я пытался абстрагировать насколько возможно BLE.

Спасибо для смотреть :)

Answer 1

Ok Несколько вещей происходит здесь:

1. вы используете синтаксис controllerAs на шаблонах, но вы меняете области видимости переменных в вашей директиве. поэтому переменные контроллера никогда не меняются.

2. ваша директива внутри ng-repeat, что означает, что вы на самом деле приведение в действие на ребенок рамку, так что если вы устанавливаете директиву переменных в рамках вашей ng-repeat не сможет достичь их, потому что они быть устанавливается после того, как дочерняя область создана .

3. вы используете element.on, который выполняется за пределами углового переваривать означает, что вы должны позвонить сферы. $ Применяются, чтобы Угловая знать, что что-то случилось.

Взгляните на эту https://jsfiddle.net/rez8ey12/

я надеюсь, что это помогает