Question

我已经完成了在SO上提出的20个类似问题，但还没有找到解决方案，所以我希望你们能帮助我。

目标是按照指令的“sort-type”属性中提供的属性对名称列表进行排序，但仅针对每个控制器中的列表（同时不是所有列表）。

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（Angular）

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

我的实际应用程序有点复杂，但我试图尽可能地抽象它。

感谢您寻找：）

Answer 1

好几件事情在这里发生：

您正在模板上使用controllerAs语法，但是您正在更改指令中的范围变量。因此你的控制器变量永远不会改变。
您的指令位于ng-repeat内，这意味着你实际上是在儿童范围内启动，所以如果你正在设置关于ng-repeat无法使用的范围的变量指令到达它们是因为它们是在子范围之后设置的创建
您正在使用在angular之外执行的element.on 摘要意味着你必须调用范围。$ apply to let 有角度知道事情发生了。

看看这个 https://jsfiddle.net/rez8ey12/

我希望它有所帮助

使用AngularJS从指令设置范围变量

1 个答案: