Question

我已经使用一些标记，css和一个常规选择元素进行了自定义选择下拉列表，但没有任何javascript，但我想将其设为angularjs指令，因此我不必重复使用样板文件我的应用程序中的HTML。这里是一个使用标记的例子（还没有angularjs的东西）

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

类似于内置select指令的方式。是否有一种简单的方法来包装或扩展select指令，同时保留它的功能？

谢谢！

Answer 1

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

Angular.js - 围绕现有select指令的Wrapper指令

1 个答案: