Angular.js - 圍繞現有的選擇指令的包裝指令

我做了一個自定義選擇下拉使用一些標記，CSS和常規選擇元素沒有任何JavaScript，但我想使這個angularjs指令，所以我不必須在我的應用程序中不斷重複樣板html。下面是使用的標記的例子（沒有angularjs東西還）Angular.js - 圍繞現有的選擇指令的包裝指令

<div class="select"> 
    <select name="mySelect"> 
    <option value="val1">Value 1</option> 
    <option value="val2">Value 2</option> 
    <option value="val3">Value 3</option> 
    </select> 
    <span class="select-value">Value 1</span> 
    <span class="select-arrow"><i></i></span> 
</div>

我希望能夠像做

<my-select ng-model="mySelect" ng-options="opt.val as opt.label for opt in options">

相似，我怎麼會與內置的選擇指令。有沒有簡單的方法來包裝或擴展選擇指令，同時保持它的功能？

謝謝！

來源

2013-11-01 Tom Brunoli

您是否嘗試過在其模板中使用ng-select製作指令？ – redmallard

我已經想過了，但我不確定是否會出現數據與ng選項綁定的問題。我會給它一個鏡頭，雖然 –

我剛剛給它一個鏡頭，唯一的選擇我可以看到的是在模板中使用字符串操作或鎖定ng選項只能使用指定的數據類型，我我寧願不這樣做。 –

Using a decorator將允許您修改指令，甚至是內置指令。例如：

angular.module('directiveDecoration', []) 
    .config(['$provide', Decorate]); 

function Decorate($provide) { 

    //decorate angular's built-in select directive 
    $provide.decorator('selectDirective', ['$delegate', function($delegate) { 
    var directive = $delegate[0], 
     link = directive.link; 

    //directive.templateUrl = "test/something.tpl.html"; 

    directive.compile = function() { 
     return function(scope, element, attrs, ctrl) { 
     link.apply(this, arguments); 

     //do more stuff here... 
     } 
    }; 

    return $delegate; 
    }]); 
}

來源

2015-03-22 23:29:40 JcT

Angular.js - 圍繞現有的選擇指令的包裝指令

回答

相關問題