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

Question

我有两个不同的自定义指令，并且想要将数据从一个指令传递到另一个指令。数据来自服务器调用。问题是 http 作为异步调用不会预先返回数据，并且另一个小部件的 Controller 不会接收它，并且它会在没有数据的情况下渲染它的 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 是(注意 anotherData 在这里传递 -

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

and 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>

此外，您要绑定(bind)文本而不是双向绑定(bind)对象，因此请将指令中的定义更改为:

anotherData: '='