Question

我需要在我的网站上显示列出产品和其他项目的复选框列表。 checklist-model属性指令适用于此，因为我可以将它绑定到与所选项目相关的项目列表。

当我在角度控制器中使用此代码时，所有这一切都正常。但是，我有几个列表框需要以相同的方式显示＆＃34;选择全部＆＃34;并且＆＃34;选择无＆＃34;每个列表的按钮。我不想重复这段代码和布局，所以我已经为整个列表创建了自己的指令。

问题是，当我使用自己的指令时，它没有正确绑定回我的数据，select all只能运行一次，而select none根本不起作用。

我怀疑它与我如何通过范围有关，而且这两个指令并不能很好地协同工作。

为什么这不适用于指令？

这是一个jsfiddle：https://jsfiddle.net/fande455/m9qhnr9c/7/

HTML

<section ng-app="myApp"   ng-controller="couponEditController">
<script type="text/ng-template" id="checkboxlist.template.html">
  <div>
    <div class="form-input form-list">
      <label ng-repeat="item in valuelist | orderBy:value">
        <input type="checkbox" checklist-model="model" checklist-value="item" /> {{item[value]}}
        <br />
      </label>
    </div>
    <button class="btn btn-default" style="float:left; margin-bottom: 5px;margin-left: 10px;margin-right:10px" ng-click="selectNone()">Select None</button>
    <button class="btn btn-default" style="float:left; margin-bottom: 5px;" ng-click="selectAll()">Select All</button>

    <div class="cleared"></div>
  </div>
</script>

<div>
  <checkboxlist model="coupon.Products" value="Name" valuelist="productsList"></checkboxlist>
</div>
</section>

JS

var myApp = angular.module('myApp', ['checklist-model']);

myApp.directive('checkboxlist', [function() {
  return {
    restrict: 'E',
    templateUrl: 'checkboxlist.template.html',
    controller: 'checkboxlistController',
    scope: {
      model: "=",
      value: "@",
      valuelist: "="
    },
    require: '^checklist-model'
  }
}]);

myApp.controller('checkboxlistController', ['$scope', function($scope) {

  $scope.selectAll = function() {
    $scope.model = angular.copy($scope.valuelist);
  };

  $scope.selectNone = function() {
    $scope.model = [];
  };
}]);

myApp.controller('couponEditController', ['$scope', function($scope) {

  $scope.coupon = 
    {"Id": 1,
    "Name": "My Coupon",
    "Products": []
    }
  ;

  $scope.productsList = [{
    "Id": 1,
    "Name": "Product 1"
  }, {
    "Id": 2,
    "Name": "Product 2"
  }];
}]);

Answer 1

来自文档：

最好不要做checklistModelList = [] checklistModelList.splice（0，checklistModelList.length）

在您的代码中，您应该

$scope.selectAll = function() {
    $scope.selectNone();
    $scope.model.push.apply($scope.model, $scope.valuelist);
};

$scope.selectNone = function() {
    $scope.model.length = 0;
};

这里有更新的小提琴：https://jsfiddle.net/m9qhnr9c/9/

我们的想法不是用新的数组替换数组，而只修改其元素。

如何在angularjs中的元素指令模板中使用属性指令？

1 个答案: