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

我对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中填充控件.但是,正如您所看到的,每次我想使用自定义下拉控件时,我都必须这样做.

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

谢谢你的帮助！

克里斯

如果您想让您的指令不仅可以在同一页面上重复使用,而且可以在多个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>

app.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);
  };
}]);

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

原文地址：https://www.jb51.cc/angularjs/142511.html

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

相关推荐