如何使用AngularJS指令创建此自定义控件？

我对AngularJS有点陌生，正在尝试基于Zurb基金会的custom select编写一个自定义select控件（请参见此处：）

我知道我需要为此使用指令，但不确定如何实现这一点

它必须是可重用的，并允许迭代传递给它的任何数组。当用户从下拉列表中选择项目时，可能需要回调

这是自定义基础下拉列表的标记：

    <select name="selectedUIC" style="display:none;"></select>
    <div class="custom dropdown medium" style="background-color:red;">
        <a href="#" class="current custom-select">Please select item</a>
        <a href="#" class="selector custom-select"></a>
        <ul ng-repeat="uic in uics">
            <li class="custom-select" ng-click="selectUIC(uic.Name)">{{uic.Name}}</li>
        </ul>
    </div>

{{{uic.Name}

这项措施目前有效。我可以通过此页面的Ctrl键填充控件。但是，正如您所看到的，每当我想使用自定义下拉控件时，我都必须这样做

关于如何将这个婴儿变成可重复使用的指令，有什么想法吗

谢谢你的帮助

---

克里斯，你在找这样的东西吗

在上面的示例中，可以将两个属性参数传递给自定义zurbSelect指令。Options是具有name属性的select option对象列表，clickCallback是控制器作用域上可用的函数，用户单击某个节时，您希望指令调用该函数

请注意，link函数中没有代码（这通常是指令逻辑的所在）。我们所做的只是包装一个模板，使其可重用并接受一些参数

我们创建了一个独立的作用域，因此指令不需要依赖于父作用域。我们将隔离范围绑定到传入的属性参数。“&”表示绑定到调用它的父作用域上的表达式（在本例中是控制器中可用的回调函数），而“=”表示在options属性之间创建一个双向绑定，因此当它在outter作用域中更改时，更改会反映在这里，反之亦然

我们还将此指令的使用限制为仅使用元素（）。您可以将其设置为类、属性等

有关更多详细信息，AngularJs指令指南非常好：

---

希望这能有所帮助。

如果你想让你的指令不仅在同一个页面上，而且在多个AngularJS应用程序中可重用，那么在它们自己的模块中设置它们并将该模块作为依赖项导入你的应用程序是非常方便的

我把Cuong Vo的plnkr放在上面（最初的功劳归他所有），并用这种方法将其分离出来。现在这意味着，如果你想创建一个新的指令，只需将它添加到

reusabledirections.js

，所有已经将

['reusabledirections']

作为依赖项的应用程序都可以使用该新指令，而无需向该特定应用程序添加任何额外的js

我还将该指令的标记移到了它自己的html模板中，因为它比将其作为字符串直接放在指令中容易阅读、编辑和维护

html

<zurb-select data-label="{{'Select an option'}}" data-options="names" 
  data-change-callback="callback(value)"></zurb-select>

<div class="row">
  <div class="large-12 columns">
    <label>{{label || 'Please select'}}</label>
    <select data-ng-model="zurbOptions.name" data-ng-change="changeCallback({value: zurbOptions.name})" 
       data-ng-options="o.name as o.name for o in options">
    </select>
  </div>
</div>

reusabledirections.js

// Add reusableDirectives as a dependency in your app
angular.module('angularjs-starter', ['reusableDirectives'])
.controller('MainCtrl', ['$scope', function($scope) {
  $scope.names = [{name: 'Gavin'}, {name: 'Joseph'}, {name: 'Ken'}];
  $scope.callback = function(name) {
    alert(name);
  };
}]);

angular.module('reusableDirectives', [])
.directive('zurbSelect', [function(){
  return {
    scope: {
      label: '@', // optional
      changeCallback: '&',
      options: '='
    },
    restrict: 'E',
    replace: true, // optional 
    templateUrl: 'zurb-select.html',
    link: function(scope, element, attr) { }
  };
}]);

zurb select.html

<zurb-select data-label="{{'Select an option'}}" data-options="names" 
  data-change-callback="callback(value)"></zurb-select>

<div class="row">
  <div class="large-12 columns">
    <label>{{label || 'Please select'}}</label>
    <select data-ng-model="zurbOptions.name" data-ng-change="changeCallback({value: zurbOptions.name})" 
       data-ng-options="o.name as o.name for o in options">
    </select>
  </div>
</div>

{{label | |'请选择'}}

这看起来很棒！谢谢你，康！谢谢你的解释！这真的很有帮助！清晰且有用，肯定+1！感谢所有细节都把基础样式添加到这个PLNKR中，所以这正是问题所在，但是它不起作用。你知道为什么吗？plnkr.co/edit/xEyEOZ Update:I将

ng init=“menuOpen=false”ng class=“{open:menuOpen}”ng click=“menuOpen=！menuOpen”

添加到自定义下拉div中，它现在可以工作了。更新2：事实上，ng repeat不应该出现在

li

元素上，而不是

ul

元素上。我在我的plnkr中解决了这个问题。