在自己的指令中包裝Angular.js ui-bootstrap或ui-select指令

Question

我正在創建一個大的Angular.JS應用程序，它使用一些第三方模塊，如ui-select和ui-bootstrap。 為了避免重復我自己，我開始創建包含例如ui-select代碼和檢索/搜索數據的邏輯的指令。

目標 ：目標是創建一個可以在模板中使用的指令，而無需在控制器中復制代碼：

<tq-car-select ng-model="model.car"></tq-car-select>

我試圖避免的：

<select ng-options="car.id as car.name for car in cars"></select>

並在使用select的所有控制器中復制以下代碼：

$scope.cars = carResource.query();
$scope.$watch('model'), function (newValue, oldValue) {
    $scope.cars = carResource.query({model: $scope.model});
});

我為那種選擇字段創建了指令。

ui-select的實際示例 ：

TQ鉛select.html：

<ui-select ng-model="$parent.tqModel" style="display: block">
    <ui-select-match placeholder="tippen ...">{{$select.selected.bezeichnung}}</ui-select-match>
    <ui-select-choices repeat="lead in leads | filter:{bezeichnung: $select.search}">
        <div ng-bind-html="lead.bezeichnung | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

tqLeadSelect.ts（TypeScript）：

export function tqLeadSelect(tqLeadSelects): ng.IDirective {

var dir: ng.IDirective = {};

dir.scope = {
    tqModel: '=',
    tqCompany: '='
};

dir.restrict = 'E';
dir.templateUrl = '/js/templates/leadApp/tq-lead-select.html';
dir.replace = false;

dir.controller = function ($scope: any) {
    if (tqLeadSelects != null && $scope.tqCompany != null) {
        $scope.leads = tqLeadSelects.getLeadsFromFirma({ id: $scope.tqCompany });
    }

    $scope.$watch('tqCompany', (newValue, oldValue) => {
        if (newValue === oldValue) return;

        $scope.leads = tqLeadSelects.getLeadsFromFirma({ id: $scope.tqCompany });
    }, true);
}

return dir;
}

tqLeadSelect.$inject = ['tqLeadSelects'];

問題 ：

• 我需要隔離范圍，因為一些視圖使用一個字段的多個實例。
• 我正在使用孤立的范圍變量tqModel，它由ui-select指令的ngModel設置
• 我想在不使用tqLeadSelect指令創建tq-required范圍變量的情況下使用ng-required

問題 ：

• 我做得對嗎？ 有沒有更好的方法來實現我的目標？
• 如何定義具有支持控制器代碼的選擇字段以檢索數據和附加功能？

Answer 1

一種解決方案是添加一個擴展現有指令的指令。

我用一個例子創建了一個Plunker： http ：//plnkr.co/edit/9IZ0aW？p = preview

以下代碼：

HTML：

<ui-select ng-model="address.selected" theme="bootstrap" ng-disabled="disabled" reset-search-input="false" style="width: 300px;">
  <ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>
  <ui-select-choices repeat="address in addresses track by $index" refresh="refreshAddresses($select.search)" refresh-delay="0">
    <div ng-bind-html="address.formatted_address | highlight: $select.search"></div>
  </ui-select-choices>
</ui-select>

控制器：

$scope.address = {};
$scope.refreshAddresses = function(address) {
  var params = {
    address: address,
    sensor: false
  };
  return $http.get(
    'http://maps.googleapis.com/maps/api/geocode/json', {
      params: params
    }
  ).then(function(response) {
    $scope.addresses = response.data.results
  });
};

可以使用配置指令簡化：

<ui-select ng-model="adress.selected" tq-select></ui-select>

控制器現在是空的！

指示：

app.directive("tqSelect", function($http) {

  return {
    restrict: "A", // Attribute
    require: ["uiSelect", "ngModel"],

    compile: function compile(tElement, tAttrs, transclude) {

      // Add the inner content to the element
      tElement.append('<ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>\
      <ui-select-choices repeat="address in addresses track by $index" refresh="refreshAddresses($select.search)" refresh-delay="0">\
        <div ng-bind-html="address.formatted_address | highlight: $select.search"></div>\
      </ui-select-choices>');

      return {
        pre: function preLink(scope, iElement, iAttrs, controller) {},
        post: function postLink(scope, iElement, iAttrs, controller) {

          // logic from controller
          scope.address = {};
          scope.refreshAddresses = function(address) {
            var params = {
              address: address,
              sensor: false
            };
            return $http.get(
              'http://maps.googleapis.com/maps/api/geocode/json', {
                params: params
              }
            ).then(function(response) {
              scope.addresses = response.data.results
            });
          };
        }
      }
    }
  }
});

該指令是實際棘手的部分。 我在編譯函數中使用了一個非常簡單的邏輯。 首先，我為ui-select指令添加所需的標記。

然后在后鏈接函數中，我添加了通常在控制器中（或在link（） - 函數中）的邏輯。