Question

这是我的HTML代码。

<parent>
    <div idx=2>DIV - 3</div>
    <div idx=0>DIV - 1</div>
    <div idx=1>DIV - 2</div>
</parent>

我需要根据directives属性重新排序子div。所以这里是我的angularjs代码。基于idx值，我想操纵DOM。

app.directive('parent', function() {
    return {
        restrict: 'E'
    }
});
app.directive('idx', function() {
    function link(scope, element, attrs) {
        console.log(scope.idx);
    }
    return {
        restrict: 'A',
        scope: {
            idx: '='
        },
        link: link
    }
});

我是angularjs的新手。请帮助我或提供一些提示来实现这一目标。

Answer 1

这有点困难。我有这个建议来实现这个目标。创建$scope数组变量（按idx排序）并使用ng-repeat绑定所有子项。请尝试以下代码。它应该按照你的预期工作。

var app = angular.module("app", []);

app.controller("MainCtrl", ["$scope", function($scope) {
  $scope.indexes = [
    {key: 2, value: 3},
    {key: 0, value: 1},
    {key: 1, value: 2}
  ];
  
  $scope.indexes.sort(function(a, b) {
    return a.key > b.key;
  });
}]);

app.directive("parent", function() {
    return {
        restrict: "E"
    }
});

app.directive("idx", function() {
    function link(scope, element, attrs) {
        console.log(scope.idx);
    }
    return {
        restrict: "A",
        scope: {
            idx: "="
        },
        link: link
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="MainCtrl">
  <parent>
    <div ng-repeat="index in indexes" idx="index.key">
      DIV - {{index.value}}
    </div>
  </parent>
</div>

根据子指令属性操作dom - angularJs

1 个答案: