angularjs - Angular.js - Wrapper directive around existing select directive

Question

I've made a custom select dropdown using some markup, css and a regular select element without any javascript, but I would like to make this an angularjs directive so I don't have to keep repeating the boilerplate html in my application. Here's an example of the markup used (with no angularjs stuff yet)

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

I want to be able to do something like

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

similar to how I would with the built in select directive. Is there an easy way to wrap or extend the select directive while keeping it's features?

Thanks!

Answer 1

使用装饰器将允许您修改指令，甚至是内置指令。例如：

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