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

Question

我需要在我列出产品和其他项目的网站上显示一个复选框列表。 checklist-model 属性指令对此很有效，因为我可以将它绑定到与项目相关的项目列表 selected.

当我在我的 angular 控制器中简单地使用这段代码时，所有这些工作正常。但是，我有几个列表框需要以相同的方式显示，每个列表都有相同的 "select all" 和 "select none" 按钮。我不想重复这段代码和布局，所以我为整个列表创建了自己的指令。

问题是当我使用我自己的指令时，它没有正确绑定回我的数据，select 全部只工作一次，而 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

来自文档：

Instead of doing checklistModelList = [] it is better to do 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;
};

这是更新后的 fiddle：https://jsfiddle.net/m9qhnr9c/9/

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

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

How do I use an attribute directive inside an element directive template in angularjs?

javascript

angularjs

angularjs-directive

checklist-model