Kommunizieren zwischen zwei Direktiven Angularjs?

Question

Ich versuche, zwischen zwei Direktiven zu kommunizieren. Ich habe den Service ausprobiert, es hat nicht funktioniert. Vielleicht mache ich etwas falsch.

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

Meine Richtlinie und Service:

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 ist nur ein einfaches Raster-Layout, wo ich die Daten in Raster zu zeigen versuchen.

Ich muss die Daten übergeben, wenn ich auf die Funktion tryingToClick klicke und das Symbol an die Render-Anweisung übergibt. Ich kann weder $ rootscope noch neue Controller verwenden. Ich werde die Logik hier in einer ziemlich großen Unternehmens-App verwenden, nur dass ich eine sehr einfache Version davon auf meinem localhost gemacht habe, nur um die Logik richtig zu machen.

Answer 1

Ihr Service sieht nicht ganz richtig aus. Ich würde verwenden

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

    var settings = {}; 

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

    return settings; 
}); 

und Sie nicht den Namen Eigenschaft des Dienstes Einstellung hier:

serVice=icon.name; 

Es sollte

serVice.name = icon.name; 

gegeben, dass Sie für die gesuchte name Eigenschaft später: $scope.rendering = serVice.name;

Answer 2

Was meinen Sie, indem Sie nicht mehr Controller erstellen? Meinst du, dass du nicht mehr in der App erstellen kannst oder dass du keine Controller innerhalb der Direktiven verwenden kannst?

Von dem, was ich Ihrer Frage verstanden warf ich diese codepen zusammen für Experimente 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; 
}); 

Ich benutzte Getter und Setter in den Service und die Controller auf den Richtlinien, die Funktionen zu belichten.