通过指令

时间:2015-04-29 18:40:40

标签: javascript angularjs

我的角度应用程序有一个需要处理结果排序的指令。我有几个静态列,排序工作正常。其余列是使用指令生成的,因为它会为数据列表中的每个标头重复。

以下是适用的主要模板代码:

<a href="#" ng-click="orderByField='status'; reverseSort = !reverseSort">
    <span class="glyphicon glyphicon-sort" aria-hidden="true" ng-show="orderByField !== 'status'"></span>
    <span class="glyphicon glyphicon-sort-by-attributes" aria-hidden="true" ng-show="reverseSort && orderByField === 'status'"></span>
    <span class="glyphicon glyphicon-sort-by-attributes-alt" ng-show="!reverseSort && orderByField === 'status'" aria-hidden="true"></span>
</a>

以下是主模板中的代码,该代码调用指令到ng-repeat:

<th ng-repeat="attribute in ctrl.attributes" attribcol="attribute" sort="attributeSort(orderByField,reverseSort)" reverse="reverseSort" orderby="orderByField" class="mps-attribute-cell topNoScroll" attribute-load-event></th>

以下是该指令的模板代码,该代码无效:

<a href="#" ng-click="sort('paValues.'+attribute.id+'_search_value', reverse);">
    <span class="glyphicon glyphicon-sort" aria-hidden="true" ng-show="orderby !== 'paValues.'+attribute.id+'_search_value'"></span>
    <span class="glyphicon glyphicon-sort-by-attributes" aria-hidden="true" ng-show="reverse && orderby === 'paValues.'+attribute.id+'_search_value'"></span>
    <span class="glyphicon glyphicon-sort-by-attributes-alt" ng-show="!reverse && orderby === 'paValues.'+attribute.id+'_search_value'" aria-hidden="true"></span>
</a>

这里发生了一些事情。第一个示例是直接在数据对象上对属性进行排序。指令内部的一个是对嵌套属性进行排序。 (paValues是属于数据对象的对象列表,我需要对paValues中的特定属性进行排序)。

以下是我的指令的代码:

angular.module('myApp')
.directive('attribcol', [function () {
        return {
            restrict: "A",
            scope: {
                attribute: "=attribcol",
                reverse: "=",
                orderby: "=",
                sort: "&"
            },
            templateUrl: "../app/templates/directives/attribcol.html"
        };
    }]);

以下是我使用的控制器中的函数代码,因此我的指令实际上可以更改主$ scope变量。 (我试图避免使用$ rootScope来实现这一目的。)

$scope.attributeSort = function(field, reverse) {
    console.log("field: " + field + ", reverse: " + reverse)
    $scope.orderByField = field;
    $scope.reverseSort = reverse;
};

结论:当我点击指令中的排序图标时,我需要设置$ scope.oderByField和$ scope.reverseSort。我知道我很接近,但是缺少将我的sort函数绑定到控制器中的attributeSort函数。

0 个答案:

没有答案