如何用AngularJS指令創建這個自定義控件？

我有點新AngularJS，我試圖寫一個基於Zurb基金會的定製自定義選擇控制選擇（在這裏看到：http://foundation.zurb.com/docs/components/custom-forms.html）如何用AngularJS指令創建這個自定義控件？

我知道我需要使用這個指令，但我不知道怎麼樣來完成這一點。

它必須是可重用的，並允許迭代任何傳遞給它的數組。當用戶從下拉列表中選擇項目時可能需要回調。

這是自定義基金會下拉列表標記：

<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填充控件。但是，正如您所看到的，每次我想使用自定義下拉控件時，都必須執行此操作。

關於如何將這個嬰兒變成可重用指令的任何想法？

感謝您的幫助！

Chris

來源

2013-03-28 cpeele00

如果您想讓指令不僅可以在同一頁面上重用，而且可以跨多個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>

來源

2013-03-29 22:46:21 GFoley83

感謝您的好解釋！這真的有幫助！ – cpeele00

清晰且有用，當然是+1！感謝所有細節 – kij

我向這個plnkr添加了基礎樣式，所以它正是問題所在，但它不起作用。任何想法爲什麼？ plnkr.co/edit/xEyEOZ **更新**：我添加了'ng-init =「menuOpen = false」ng-class =「{open：menuOpen}」ng-click =「menuOpen =！menuOpen」'to自定義下拉div，現在它工作。 **更新2 **：實際上，ng-repeat不應該在'li'元素上，而不在'ul'上。我在我的plnkr中解決了這個問題。 –

是這樣的東西你在找什麼？

http://plnkr.co/edit/wUHmLP

在上面的例子中，你可以在這兩個屬性參數自定義zurbSelect指令傳遞。選項是具有名稱屬性的選擇對象列表，clickCallback是控制器作用域上可用的功能，您希望指令在用戶單擊某個節時調用。

請注意，鏈接函數中沒有代碼（這是您的指令的邏輯一般會去的地方）。我們所做的只是包裝一個模板，以便它可以重複使用並接受一些參數。

我們創建了一個隔離範圍，因此該指令不需要依賴父範圍。我們將隔離範圍綁定到傳入的屬性參數中。'&'表示綁定到父範圍的表達式，並調用它（在我們的例子中，控制器中可用的回調函數），'='表示創建一個雙向綁定在選項屬性之間，所以當它在外部作用域中發生變化時，變化會反映在此處，反之亦然。

我們也將此指令的使用限制爲僅限元素（）。您可以將其設置爲類，屬性等。

欲瞭解更多詳情，AngularJs指令引導好纔是真的好：

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

希望這有助於。

來源

2013-03-28 17:34:09

這看起來太棒了！謝謝Cuong！ – cpeele00

如何用AngularJS指令創建這個自定義控件？

回答

相關問題