如何创建与AngularJS指令此自定义控件？ [英] How to create this custom control with AngularJS directive?

问题描述

我是一个有点新的AngularJS和想写基于Zurb基金会的自定义自定义选择控制选择（在这里看到：<一href=\"http://foundation.zurb.com/docs/components/custom-forms.html\">http://foundation.zurb.com/docs/components/custom-forms.html)

I'm a bit new to AngularJS and am trying to write a custom select control based on Zurb Foundation's custom select(see here: http://foundation.zurb.com/docs/components/custom-forms.html)

我知道我需要使用这个指令，但我不知道如何做到这一点。

I know I need to use a directive for this but am not sure how to accomplish this.

这将有受到重用，并允许任何的数组中传递给它的迭代。大概需要时用户从下拉列表中选择项目的回调。

It's going to have to be reusable and allow for the iterating of whatever array is passed in to it. A callback when the user selects the item from the dropdown list is probably needed.

下面是标记自定义基金会下拉列表：

Here is the markup for the custom Foundation dropdown list:

    <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键控制。然而，正如你所看到的，我有这个，我想用一个自定义下拉控件都必须这样做。

This works for now. I am able to populate the control from this page's Ctrl. However, as you can see, I'd have to do this every time I wanted to use a custom dropdown control.

任何想法，我怎么可以把这个孩子抱进一个可重用的指令？

Any ideas as to how I can turn this baby into a reusable directive?

感谢您的帮助！

克里斯

推荐答案

如果你想使你的指令，可重复使用的不只是在同一页上，但在多个AngularJS应用程序，那么它的pretty方便对它们进行设置在自己的模块，并导入该模块为您的应用程序的依赖。

If you want to make your directives reusable not just on the same page, but across multiple AngularJS apps, then it's pretty handy to set them up in their own module and import that module as a dependency in your app.

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

I took Cuong Vo's plnkr above (so initial credit goes to him) and separated it out with this approach. Now this means that if you want to create a new directive, simply add it to reusableDirectives.js and all apps that already have ['reusableDirectives'] as a dependency, will be able to use that new directive without needing to add any extra js to that particular app.

我也感动了指令到它自己的HTML模板的标记，它更容易阅读，编辑和维护不是直接有它的指令，因为在字符串中。

I also moved the markup for the directive into it's own html template, as it's much easy to read, edit and maintain than having it directly inside the directive as a string.

<大骨节病> Plnkr演示

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>

这篇关于如何创建与AngularJS指令此自定义控件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！