在AngularJS中使用不同控制器的指令？

Question

我已經為搜索框創建了一個指令，我希望將其用於不同的視圖。 這是指令 -

angular.module('jobSeekerApp')
  .directive('searchBoxDirective', function () {
    return {
      restrict: 'E',
      templateUrl: 'templates/searchbox-template.html',
    };
  });

指令的模板 -

<span class="searchButton"><i class="fa fa-search fa-2x"></i></span>
<input ng-change="search()" ng-model="searchTerm" ng-keydown="deleteTerm($event)" type="text" id="search-box" style="width: 0px; visibility:hidden;"/>

我想在兩個看起來像這樣的視圖上使用這個指令 -

查看1 -

<div class="panel panel-default companies" ng-repeat="company in companies.companiesList">
    <div class="panel-heading text-center"><a ng-href="/companies/{{company.id}}" class="hvr-sink"><h3 class="well">{{company.company_name}}</h3></a></div>
    <div class="panel-body text-center flexcontainer">
        <div>Location: {{company.location}}</div>
        <div>Founded In: {{company.founded_year}}</div>
        <div ng-if="company.opening">Opening: Yes</div>
        <div ng-if="!company.opening">Opening: No</div>
        <div>Number Of Openings: {{company.no_openings}}</div>
    </div>
</div>

查看2 -

<div class="panel panel-default jobs" ng-repeat="job in jobs.jobsList">
    <div class="panel-heading text-center"><a href="{{job.career_url}}" target='_blank' class="hvr-sink"><h3 class="well">{{job.job_name}}</h3></a></div>
    <div class="panel-body text-center flexcontainer">
        <div>Company: {{job.company_name}}</div>
    </div>
</div>

正如您所看到的，我在視圖中使用了別名companies和jobs ，因此我的指令無法影響它所包含的視圖。如果我在模板中使用companies或jobs ，那么它可以正常工作。 例如，如果將模板更改為 -

<span class="searchButton"><i class="fa fa-search fa-2x"></i></span>
<input ng-change="companies.search()" ng-model="companies.searchTerm" ng-keydown="companies.deleteTerm($event)" type="text" id="search-box" style="width: 0px; visibility:hidden;"/>

然后它適用於與companies控制器相關聯的視圖，同樣適用於jobs 。

如何將指令與相應的控制器實例一起使用？ 謝謝。

Answer 1

為搜索創建一個簡單的視圖

創建自己的控制器

由該控制器在服務中搜索記錄並將數據放入服務變量中

this.searchResult = [];
this.search = function(searchText){
    // code to search
    this.searchResult = Result;    
}

現在，您想要使用此結果，請在當前控制器中使用此服務變量上的監視，例如：

$scope.$watch(function() { return servicename.searchResult ; }, function(newVal, oldval) { 
   if(newval != oldval){
       $scope.data = servicename.searchResult;
       /* Do the rest of stuff */
   }
}, true);

Answer 2

使用隔離范圍並明確將搜索項傳遞給您的指令。 就像是：

angular.module('jobSeekerApp')
  .directive('searchBoxDirective', function () {
    return {
      restrict: 'E',
      scope: {
        searchTerm: '=' <-- you can use '@' if you don't need two-way binding
      },
      templateUrl: 'templates/searchbox-template.html',
    };
  });

您沒有顯示實際使用指令的位置，但是您將通過屬性傳遞scope屬性（這是在<div>上使用您的指令）：

<div search-box-directive search-term="companies.searchTerm"></div>

Answer 3

由於搜索功能是異步的，我建議避免使用ng-change來調用它。 而是使用ng-click搜索圖標。

<span class="searchButton" ng-click="$ctrl.searchFn()">
    <i class="fa fa-search fa-2x"></i>
</span>
<input ng-model="$ctrl.searchTerm" type="text" id="search-box">

在該指令中，使用isolate scope和bindToController 。

app.directive('searchBoxDirective', function () {
    return {
      restrict: 'E',
      scope: { 'searchTerm': "=",
               'searchFn': "&"
             },
      controller: function () {},
      controllerAs: '$ctrl',
      bindToController: true,
      templateUrl: 'templates/searchbox-template.html'
    };
});

用法

<search-box-directive search-term="companies.searchTerm"
                      search-fn="companies.search()" >
</search-box-directive>

<search-box-directive search-term="jobs.searchTerm"
                      search-fn="jobs.search()" >
</search-box-directive>

search-term屬性創建從父作用域到指令isolate作用域的雙向綁定。 search-fn屬性從父作用域創建表達式綁定以隔離作用域。