2つの指令Angularjsの間で通信しますか？

Question

私は2つの指令の間で通信しようとしています。私はサービスの方法を試して、それは動作しませんでした。たぶん私は何か間違ったことをしています。

<list-data testing="trial" template-url="grid.html" link-passed="data.json"></list-data>  

マイディレクティブとサービス：

app.directive('listData', function($http, serVice){ 
return { 
    restrict: 'E', 
    scope: { 
     testing: '@', 
     linkPassed: '@' 
    }, 
    templateUrl: function(elem,attrs) { 
     return attrs.templateUrl || 'some/path/default.html' 
    }, 
    link: function($scope){ 
     var url = 'js/' + $scope.linkPassed; 
     $http.get(url).then(success, error); 

     function success(data){ 
      $scope.iconUrl = data.data; 
     } 

     function error(response){ 
      console.log(response) 
     } 

     $scope.tryingToClick = function(icon){ 
      serVice=icon.name; 
      console.log(serVice) 
     } 
    } 
}; 
}); 

app.directive('render', function(serVice){ 
    return { 
     restrict: 'E', 
     template: '{{rendering}}', 
     link: function($scope){ 
      $scope.rendering = serVice.name; 
      console.log(serVice) 
     } 
    }; 
}); 

app.factory('serVice', function(){ 
    return{items:{}}; 
}) 

grid.htmlはちょうど私は、グリッド内のデータを表示しようとしていますシンプルなグリッドレイアウトです。

<div class="col-sm-6 grid" ng-repeat="icon in iconUrl"> 
<p ng-click="tryingToClick(icon)">{{icon.iconUrl}}</p> 
</div> 

tryToClick関数をクリックするとデータを渡す必要があり、アイコンがレンダリングディレクティブに渡されます。ここでは$ rootscopeを使うことはできませんし、新しいコントローラを作ることもできません。私はかなり大きなエンタープライズアプリケーションでここでロジックを使用しています。ちょうど論理的な権利を得るために、ローカルホストで非常に単純なバージョンを作成しました。

Answer 1

サービスが正しく表示されません。私は

app.factory('serVice', function() { 

    var settings = {}; 

    // optionally set any defaults here 
    //settings.name = 'me'; 

    return settings; 
}); 

、あなたはここでサービスの名前プロパティを設定していないを使用したい：

serVice=icon.name; 

それは

serVice.name = icon.name; 

あなたが探していることを考えるべきですnameプロパティ：$scope.rendering = serVice.name;

Answer 2

コントローラを追加しないとどういう意味ですか？あなたは、アプリケーション上で多くを作成することはできないか、ディレクティブ内でコントローラを使用できないことを意味しますか？私はあなたの質問を理解し何から

は、私は機能を公開するディレクティブにゲッターとセッターサービスでとコントローラを使用http://codepen.io/ihinckle/pen/JWGpQj?editors=1010

<div ng-app="directiveShare"> 
    <directive-a an-array="[1,2,3,4,5]"></directive-a> 
    <directive-b></directive-b> 
</div> 

angular.module('directiveShare', []) 
.directive('directiveA', function(){ 
    return { 
     restrict: 'E', 
     scope: { 
      anArray: '<' 
     }, 
     controller: function($scope, aService){ 
      $scope.clicked = aService.setIcon; 
     }, 
     template: ` 
      <ul> 
       <li ng-repeat="item in anArray" ng-click="clicked(item)">item</li> 
      </ul>` 
    } 
}) 
.directive('directiveB', function(){ 
    return { 
     controller: function($scope, aService){ 
      $scope.displayIcon = aService.getIcon; 
     }, 
     template: ` 
      <h1>{{displayIcon()}}</h1> 
      ` 
    } 
}) 
.factory('aService', function(){ 
    var srvc = {}; 

    srvc.setIcon = function(x){ 
     srvc.icon = x; 
    }; 

    srvc.getIcon = function(){ 
     if(srvc.icon){ 
      return srvc.icon; 
     }else { 
      return ''; 
     } 
    }; 

    return srvc; 
}); 

の実験のために一緒にこのcodepenを投げました。