在两个指令之间进行交流

Question

我正在尝试在两个指令之间进行交流。我尝试了服务方式，它行不通。也许我做错了什么。

<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;
});

我在指令中使用了服务和控制器中的getters和setter。