8

我对 AngularJS 有点陌生，正在尝试基于 Zurb Foundation 的自定义选择编写自定义选择控件（请参见此处： http: //foundation.zurb.com/docs/components/custom-forms.html）

我知道我需要为此使用指令，但不确定如何完成此操作。

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

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

    <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>

这暂时有效。我可以从此页面的 Ctrl 填充控件。但是，如您所见，每次我想使用自定义下拉控件时都必须这样做。

关于如何将这个婴儿变成可重复使用的指令的任何想法？

谢谢你的帮助！

克里斯

4

2 回答 2

21

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

我把 Cuong Vo 的 plnkr 放在上面（所以最初的功劳归于他）并用这种方法把它分开了。现在这意味着，如果您想创建一个新指令，只需将其添加到reusableDirectives.js所有已经['reusableDirectives']作为依赖项的应用程序，就可以使用该新指令，而无需向该特定应用程序添加任何额外的 js。

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

Plnkr Demo

html

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

应用程序.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);
  };
}]);

可重用Directives.js

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

<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>
于 2013-03-29T22:46:21.013 回答
4

你在找这样的东西吗？

http://plnkr.co/edit/wUHmLP

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

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

我们创建了一个隔离范围，因此该指令不需要依赖于父范围。我们将隔离作用域绑定到传入的属性参数。“&”表示绑定到调用 this 的父作用域上的表达式（在我们的例子中是控制器中可用的回调函数），“=”表示创建双向绑定在选项属性之间，所以当它在外部范围内发生变化时，变化会反映在这里，反之亦然。

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

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

http://docs.angularjs.org/guide/directive

希望这可以帮助。

于 2013-03-28T17:34:09.517 回答