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 の plkr を取り上げ (最初のクレジットは彼に与えられます)、このアプローチで分離しました。これは、新しいディレクティブを作成する場合は、それを追加するだけで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>
于 2013-03-29T22:46:21.013 に答える
4

このようなものをお探しですか？

http://plnkr.co/edit/wUHmLP

上記の例では、カスタム zurbSelect ディレクティブに 2 つの属性パラメーターを渡すことができます。Options は、name 属性を持つ選択オプション オブジェクトのリストであり、clickCallback は、ユーザーがセクションをクリックしたときにディレクティブが呼び出すコントローラーのスコープで使用可能な関数です。

リンク関数にはコードがないことに注意してください (これは、通常、ディレクティブのロジックが配置される場所です)。ここで行っているのは、テンプレートをラップして再利用可能にし、いくつかのパラメーターを受け入れられるようにすることだけです。

ディレクティブが親スコープに依存する必要がないように、分離されたスコープを作成しました。分離されたスコープを、渡された属性パラメーターにバインドしました。「&」は、これを呼び出す親スコープの式 (この場合はコントローラーで使用可能なコールバック関数) にバインドすることを意味し、「=」は双方向バインディングを作成することを意味します。 options 属性の間なので、外側のスコープで変更すると、変更がここに反映され、その逆も同様です。

また、このディレクティブの使用を要素 () のみに制限しています。これをクラス、属性などに設定できます。

詳細については、AngularJs ディレクティブ ガイドが非常に優れています。

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

お役に立てれば。

于 2013-03-28T17:34:09.517 に答える