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函数并且图标传递给render指令时，我需要传递数据。我不能在这里使用$ rootscope，也不能制作新的控制器。我将在一个非常大的企业应用程序中使用逻辑，只是我在我的localhost上创建了一个非常简单的版本，只是为了使逻辑正确。

Answer 1

您的服务看起来不太合适。我用

public void insertInOrder(int x) {
    if (head == null) {

        head = new Node(x);

    } else {
        Node prev;
        Node curr;

        for (prev = null, curr = head;
            (curr != null) && (x > curr.getNumber()); 
            prev = curr, curr = curr.getNext()) {}

        if (prev == null) {
            insertAtHead(x);
        }

        if (curr == null) {
            insertAtTail(x);
        } else {
            Node nNex = new Node(x);
            nNex.setNext(curr);
            prev.setNext(nNex); // NullPointerException is raised here
        }
    }
}

并且您没有在此处设置服务的name属性：

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

  var settings = {};

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

  return settings;
});

应该是

serVice=icon.name;

鉴于您之后正在寻找serVice.name = icon.name;属性：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;
});

我在指令的服务和控制器中使用了getter和setter来公开函数。

两个指令Angularjs之间的沟通？

2 个答案: