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中使用骆驼案件做好准备！

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

2 个答案: