Question

我创建了一个自定义指令作为模板，使用ng-repeat显示一些信息。我还需要对循环的数组进行一些操作。我的问题是，如果每个元素都位于独立指令内的单独范围内，我该如何删除或添加元素？如果不使用该指令，任务就很容易：

    <div class="well" ng-repeat="dat in data">
        <form novalidate>
            <div class="form-group">
                <label for="name">name:</label>
                <input type="text" class="form-control" id="name" ng-model="dat.name" ng-disabled="enableEdit">
            </div>
            <div class="form-group">
                <label for="balance">balance:</label>
                <input type="text" class="form-control" id="balance" ng-model="dat.balance" ng-disabled="enableEdit">
            </div>
            <div class="form-group">
                <label for="fruit">favorite Fruit:</label>
                <input type="text" class="form-control" id="fruit" ng-model="dat.favoriteFruit" ng-disabled="enableEdit">
            </div>
            <div class="form-group">
                <label for="greeting">greeting:</label>
                <input type="text" class="form-control" id="greeting" ng-model="dat.greeting" ng-disabled="enableEdit">
            </div>
            <button class="btn btn-danger" ng-click="remove($index)">remove</button>
            <button class="btn btn-default" ng-click="enableEdit=!enableEdit">edit</button>
            <button class="btn btn-success" ng-click="save(dat,$index);enableEdit=!enableEdit" ng-disabled="enableEdit">save</button>
        </form>
    </div>

重构到指令后，任务不是那么明显：

    <div class="well" ng-repeat="dat in data">
        <data-directive user="dat" index="{{$index}}" arr="data"></data-directive>
    </div>

指令模板如下所示：

<form novalidate>
    <div class="form-group">
        <label for="name">name:</label>
        <input type="text" class="form-control" id="name" ng-model="user.name" ng-disabled="enableEdit">
    </div>
    <div class="form-group">
        <label for="balance">balance:</label>
        <input type="text" class="form-control" id="balance" ng-model="user.balance" ng-disabled="enableEdit">
    </div>
    <div class="form-group">
        <label for="fruit">favorite Fruit:</label>
        <input type="text" class="form-control" id="fruit" ng-model="user.favoriteFruit" ng-disabled="enableEdit">
    </div>
    <div class="form-group">
        <label for="greeting">greeting:</label>
        <input type="text" class="form-control" id="greeting" ng-model="user.greeting" ng-disabled="enableEdit">
    </div>
    <button class="btn btn-danger" ng-click="remove(index)">remove</button>
    <button class="btn btn-default" ng-click="enableEdit=!enableEdit">edit</button>
    <button class="btn btn-success" ng-click="save(user,$index);enableEdit=!enableEdit" ng-disabled="enableEdit">save</button>
</form>

指令js：

app.directive("data-directive", ["dataService", function (dataService) {

    return {
        restrict: 'E',
        templateUrl:"directives/dataDirectiveTemplate.html",
        scope:{
            user: "=",
            index: "@",
            arr: "="
        },
        controller: function ($scope) {
            $scope.enableEdit = true;

            $scope.remove = function (index) {
                console.log(arr);
                dataService.removeItem(arr, parseInt(index));
            };

            $scope.save = function (item,index) {
                dataService.saveItem(item, index, $scope.data);

            };

            $scope.changes = function () {
                console.log($scope.data);
            };
        }
    }
}]);

我设法传递$index变量，但如何传递整个data对象数组？

Answer 1

我们首先定义data的所有者。它可以是视图使用data-directive或dataService的控制器。

现在，所有者持有data并且有责任操纵它。

如果是dataService，则可以从指令中调用其方法，并且data已经可以使用它。

如果是控制器，它可以使用&例如：

传递方法

scope: {
  user: "=",
  index: "@",
  arr: "=",
  onRemove: "&",
  onSave: "&",
  onChange: "&",
},

AngularJS如果每个元素都存储在一个独立指令中，如何操作对象数组？

1 个答案: