Question

我在Angular.js中构建了这个“组件”，但我不知道将它封装到可重用元素指令中的最佳方法是什么。

以下是当前代码：http://plnkr.co/edit/OdWoUXOpoZ6pIVbMUVXk?p=preview

以下是我想用它的方法

<span ng-bind="selection"></span>

<checkbox-list ng-model="selection">

    <checkbox value="name1">Label 1</checkbox>
    <checkbox value="name1">Label 2</checkbox>
    <checkbox value="name1">Label 3</checkbox>
    <checkbox value="name1">Label 4</checkbox>
    <checkbox value="name1">Label 5</checkbox>

</checkbox-list>

最好的行为是能够在<checkbox>之外重用<checkbox-list>。此外，我认为将模型绑定到每个<checkbox>是至关重要的，至少不是来自html代码。但是在列表之外使用<checkbox>将需要模型绑定。

我使用<checkbox>代替<input type="checkbox">，因为我想为复选框设置自定义设计，其中涉及自定义模板和CSS。

你们能否就这种情况给我一些建议？一个plunker代码将非常感激，但不是必需的，我只需要你的意见。

谢谢！

Answer 1

我用可重复使用的指令制作了一个plunker。这是你在找什么？

http://plnkr.co/edit/L0AwTtCyLxg9fbtzN0oC?p=preview

我修改了您稍微显示的示例，以便您可以从<checkbox-list>标记

为复选框本身设置“值”

<强>更新我修改了代码，允许你单独使用<checkbox>指令并给它一个模型对象来绑定到

双倍更新

这是一个更完整的plunk，其中包含基于我们的convo的所有要求

Answer 2

这是一个包含继承范围demo的简单解决方案：

var app=angular.module('plunker', []);

app.controller("MainCtrl",function ($scope, $interval) {

  $scope.manufacturers = { nume1: true, nume4: true };

  $scope.$watch('manufacturers', function() {
    $scope.updateValue();
  }, true);

  $scope.updateValue = function() {
    var activeItems = [];

    for (var key in $scope.manufacturers) {
      if ($scope.manufacturers[key] === true)
        activeItems.push(key);
    }

    $scope.value = activeItems.join(',');
  }

});

app.directive("d", function () {

    return {
        restrict: "E",
        templateUrl: 'dir.html',  
        link: function(scope, element, attrs){
         }

    };
});

对于指令的其他可能实现，请参阅此plunker。

将控制器代码转换为可重用的指令

2 个答案: