如果我们使用$http获取数据，则不会将数据从一个自定义指令传输到另一个

Question

我有两个不同的自定义指令，希望将数据从一个指令传递到另一个指令。数据来自服务器调用。问题是http作为一个asyn调用不会提前返回数据，另一个小部件的控制器也不会接收到它，它在没有它的情况下呈现为html。以下是完整的代码（我已经删除了一些可能在问题中没有意义的代码）-

击中服务器的服务是-

angular.module('myModule')
    .service('MyService', [
        '$http',
        function($http) {
            this.getData = (someId) => {
                var url = someUrl + '/' + someId;
                return  $http.get(url);
            };
        }
    ]);

调用服务并在要转移到另一个指令的范围中设置"anotherData"的第一个指令是-

angular.module('myModule')
    .directive('myDirective', ['MyService',
        function(MyService) {
        return {
            restrict: 'E',
            scope: {
                data: '='
            },
            templateUrl: 'my-template.html',
            controller: ['$scope', function($scope) {
                MyService.getData ($scope.data.id).then((response) => {
                    $scope.anotherData = response.data;
                });
        }]
    }
}]);

我调用另一个指令的my-template.html是（注意，这里传递了另一个数据-

<other-directive mode="display" data="data" anotherData="anotherData" ></other-directive>

另一个应该接收"anotherData"但没有给我结果的指令是-

angular.module('otherModule')
    .directive('otherDirective', [function() {
        return {
            restrict: 'E',
            scope: {
                id: '@',
                data: '=',
                mode: '@',
                anotherData: '@'
            },
            templateUrl: 'other-template.html',
            controller: ['$scope', '$element', function ($scope, $element) {
                console.log("other data in widget after server call:");
///THIS IS UNDEFINED.
                console.log($scope.anotherData);
            }],
            link: function ($scope, $element) {
        }
    }
}]);

other-template.html有iframe来显示youtube小部件-

<iframe width="{{anotherData.videoWidth}}"
        height="{{anotherData.videoHeight}}"
        src="{{anotherData.videoURL}}" frameborder="0" allowfullscreen></iframe>

Answer 1

您应该使用破折号而不是驼色大小写，如下所示：

<other-directive mode="display" data="data" another-data="anotherData" ></other-directive>

此外，您正在为文本绑定，而不是双向绑定对象，因此将指令中的定义更改为：

anotherData: '='

Answer 2

这应该可以完成

<other-directive another-data=anotherData></other-directive>

你需要用html中的camelcase来填充！