Angularjs 如何以解耦的方式将自动完成/前瞻指令用于使用独立服务的多个独立输入？

目前我有三个输入，我需要在上面使用autocomplete，如下所示：

<div class="actor-container">
   <input type="text" class="actors"/> 
</div>
<div class="movie-container">
   <input type="text" class="movies"/> 
</div>
<div class="director-container">
   <input type="text" class="directors"/> 
</div>

<div class="actor-container">
   <input type="text" class="actors" my-autocomplete="my-autocomplete" service="actorService"/> 
</div>
<div class="movie-container">
   <input type="text" class="movies" my-autocomplete="my-autocomplete" service="movieService"/> 
</div>
<div class="director-container">
   <input type="text" class="directors"  my-autocomplete="my-autocomplete" service="directorService"/> 
</div>

我也有自己的自动完成指令

<div my-autocomplete="my-autocomplete" service="serviceName"></div>

angular.
module('myApp.suggestModule').
directive('suggestDir',function(){
    // Runs during compile
    return {
        scope: {
            inputString: '@',
            service: '@',
            select: '&'
        },
        controller: [
            '$scope',
            '$injector', 
            function($scope, $injector) {
                this.inputChanged = function(inputString){
                    $injector.get($scope.service).suggest(inputString,
                        function(data){
                            $scope.suggestEntries = data;
                        }
                    );
                };

                this.entryWasClicked = function(suggestEntry){
                    $scope.select({suggestEntry:suggestEntry})
                }

        }],
        restrict: 'A',
        templateUrl: 'suggestMenu/views/suggest-menu.html',

        link: function(scope, element, attrs, controller) {
            scope.$watch('inputString', function(newValue, oldValue) {

                controller.inputChanged(newValue);
            });



        }
    };
})

autocomplete将获取一个serviceName作为输入，以访问不同的数据存储库，并使用$injector在不同的池中搜索

AngularJS将此指令与其他三个输入连接的最佳实践是什么？ 我想把它放在每个输入中，就像这样：

<div class="actor-container">
   <input type="text" class="actors"/> 
</div>
<div class="movie-container">
   <input type="text" class="movies"/> 
</div>
<div class="director-container">
   <input type="text" class="directors"/> 
</div>

<div class="actor-container">
   <input type="text" class="actors" my-autocomplete="my-autocomplete" service="actorService"/> 
</div>
<div class="movie-container">
   <input type="text" class="movies" my-autocomplete="my-autocomplete" service="movieService"/> 
</div>
<div class="director-container">
   <input type="text" class="directors"  my-autocomplete="my-autocomplete" service="directorService"/> 
</div>

但这是一种好的做法吗？或者该指令应该放置在外部一次，然后使用共享服务/广播/观看等，使用三个单独的控制器和三个输入中的每一个进行通信

<div class="actor-container" ng-controller="addActorCtrl">
   <input type="text" class="actors"/> 
</div>
<div class="movie-container" ng-controller="addMovieCtrl">
   <input type="text" class="movies"/> 
</div>
<div class="director-container" ng-controller="addDirectorCtrl">
   <input type="text" class="directors"/> 
</div>
<div my-autocomplete="my-autocomplete" service="serviceName(how to pass that??)"></div>

应该做的是有人输入这些字段中的每一个，并根据serviceName和弹出的用户输入自动完成相应的操作。然后用户将单击其中一个返回的条目，并将其添加到正确的容器中。我还想知道代码object.movies.push（例如电影）在哪里-当用户单击一个建议的电影时，它将被放置

如果您能提供一个包含一些代码的示例，我将不胜感激，因为我对AngularJS相当陌生，我认为这对其他人也很有用：

---

谢谢

这就是我所做的，我认为这是一个很好的实践：

每个输入都有一个控制器，我在每个输入中添加了指令：

<div ng-controller="addActorCtrl">
     <div suggest-dir="suggest-dir" service="actorService" input-string="{{input1}}" select="addActor(suggestEntry)"></div>
     <input id="actors" name="actors" type="text"  placeholder="" class="input-medium" ng-model="input1"/>
</div>

<div ng-controller="addMovieCtrl">
     <div suggest-dir="suggest-dir" service="movieService" input-string="{{input2}}" select="addMovie(suggestEntry)"></div>
     <input id="actors" name="actors" type="text"  placeholder="" class="input-medium" ng-model="input2"/>
</div>

<div ng-controller="addDirectorCtrl">
     <div suggest-dir="suggest-dir" service="directorService" input-string="{{input3}}" select="addDirector(suggestEntry)"></div>
     <input id="actors" name="actors" type="text"  placeholder="" class="input-medium" ng-model="inpu23"/>
</div>

这是我的autocomplete entry指令，当它被单击时，它从其父suggestDir调用entryWasClicked。它的父级调用$scope.select，但它是一个¶meter，因此它是传入的函数

angular.
    module('myApp.actorModule').
    constant('restAPI','http://localhost/project/').
    factory('actorService',['$http','restAPI',function($http,restAPI){
        return {
            latest: function (callback){
                $http({
                    method: 'GET',
                    url: '',
                    cache: true
                }).success(callback);
            },

            find: function(id, callback){
                $http({
                    method: 'GET',
                    url: restAPI+'actor/'+id,
                    cache: true
                }).success(callback);
            },

            suggest: function(stringInput,callback){
                $http({
                    method: 'GET',
                    url: restAPI+'actor/suggest/'+stringInput,
                    cache: true
                }).success(callback);
            },

            update: function(id,actor, callback){
                $http({
                    method: 'PUT',
                    url: restAPI+'actor/'+id,
                    data: actor
                }).success(callback);
            }
        }
    }])

<div id="suggestions" ng-show="suggestEntries.length>0 && inputString.length>0">
<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
<div class="viewport">
    <div id="suggestions-list" class="overview">
        <div class="types" ng-repeat="suggestEntry in suggestEntries">
            <div suggest-entry-dir="suggest-entry-dir" suggest-entry="suggestEntry"></div>
        </div>
    </div>
</div>
<div class="close" style="width:10px; cursor: pointer; height:10px; background-color:#aaaaff; position:absolute; top: 4px; right: 4px;"></div>
</div>

<div class="suggest-entry  suggest-{{suggestEntry.label}}">
    {{suggestEntry.textIndexed}}

</div>