1

検索ボックスと検索結果という 2 つの要素レベルのディレクティブがあります。私のマークアップは次のようなものです（簡略化）：

<catalogue-search-box query="{{query}}">
<catalogue-search-results></catalogue-search-results>

検索結果ディレクティブから検索ボックス コントローラーにアクセスしようとしていますが、ドキュメントによると、ディレクティブの require プロパティでは、同じ要素または親要素のコントローラーのみを見つけることができます。隣接する要素のコントローラーを見つける方法はありますか?

4

2 に答える 2

1

ここにコメントした後、私はそれを行う方法を示します。オブジェクトを使用してすべての状態を保持し、それを両方のディレクティブに渡します。デモプランカー

HTML

<body ng-controller="MySearchController">
  <search-box search="mySearch"></search-box>
  <search-results search="mySearch"></search-results>
</body>

JS

var search = angular.module('search', []);

//simulated service
search.service('Search', ['$timeout', '$q', function($timeout, $q) {
  return {
    findByQuery : function(query) {
      var deferred = $q.defer();
      $timeout(function() {
        deferred.resolve([query + ' result1', query + ' result2']);
        console.log('resolved query ' + query);
      }, 2000);
      return deferred.promise;
    }
  };  
}]);

search.controller('MySearchController', ['$scope', function($scope) {
  $scope.mySearch = {
    query : ''
  }
}]);

search.controller('SearchBoxCtrl', ['$scope', 'Search', function($scope, Search) {
  $scope.execute = function(search) {
    console.log(search);
    if(search.query && search.query.length > 3 && !search.running) {
      search.running = true;
      search.promise = Search.findByQuery(search.query).then(function(val) {
        search.results = val;
      });
    }
  };
}]);

search.directive('searchBox', function(){
  return {
    restrict: 'E',
    scope : {
      search : '='
    },
    controller: 'SearchBoxCtrl',
    template : '<div ng-hide="search.results">Query: <input type="text" ng-model="search.query" ng-disabled="search.running"></input> <button ng-click="execute(search)" ng-disabled="search.running">Search</button></div>',
    replace: 'true'
  };
});

search.controller('SearchResultsCtrl', function(){

});

search.directive('searchResults', function(){
  return {
    restrict: 'E',
    scope : {
      search : '='
    },
    controller: 'SearchResultsCtrl',
    template : '<div ng-show="search.results"><div ng-repeat="result in search.results">{{result}}</div></div>',
    replace: true,
    link : function(scope, element, attrs, ctrl){
    }
  };
});

PS :

  1. ディレクティブ テンプレートで p タグをルート ノードとして使用しないでください。p 個の子ノードがあり、Angular に単一のルート ノードが必要な場合、html パーサーは 2 つのノードを報告します。
  2. コントローラーでプロミスをさらに使用して、結果が入ったときに実行する他の関数を登録できます。
于 2013-09-23T17:14:59.350 に答える
0

質問以来、私が実験してきた1つの方法は、ある種のコントローラーディレクティブを持つことです。

<catalogue-search>
    <catalogue-search-box query="{{query}}">
    <catalogue-search-results></catalogue-search-results>
</catalogue-search>

次に、require ステートメントで親 (^) 修飾子を使用して、「コントローラー ディレクティブ」にアクセスできます。各ディレクティブは、コントローラー ディレクティブを介して互いに通信できます。

これは理にかなっているように見えますか、それとも物事を過度に複雑にしていますか?

于 2013-09-23T14:43:55.540 に答える