将数据从控制器内部的函数传递到角度为

时间:2017-03-22 07:39:40

标签: javascript angularjs

我在角度控制器中有一个函数,它调用工厂从API请求数据并调用指令内的函数,这很好。但是检索到的数据需要传递到指令内的函数中,除了'undefined'之外我似乎无法得到任何东西作为指令函数内的数据,而在控制器函数中它工作得很好。我已经使用.then()来链接数据检索和指令函数调用以使它们连续运行,但它没有帮助,我似乎无法将控制器中函数内部定义的任何内容传递给指令函数。 / p>

我的代码如下所示:

控制器

angular.module('myControllerModule', ['getData'])
.controller('myViewController', function($scope, getDataFactory){

    // Mapping the directive function to controller
    $scope.setDirectiveFn = function(directiveFn){
        $scope.directiveFn = directiveFn;
    };

    // the function used for the factory and directive function call 
    $scope.search = function(){
        $scope.RetreivedData = getDataFactory.getTheData()
           .then(function successCallback(response){
                $scope.data = response.data; // This is not passed
            }).then($scope.directiveFn())
    };
});

工厂

angular.module('getData',[])
.factory('getDataFactory', function($http){
    return{
        getTheData: function() {
            return $http({
                url: 'url/to/API/endpoint',
                method: 'GET'
            })
        },
    }
});

指令

angular.module('myChartModule')
.directive('chart', function (){
    return{
        restrict: 'E',
        scope: {
            data: '=',
            setFn: '&',
        },
        controller: 'myViewControllerr',
        templateurl: '/path/to/my/template/file.html',
        link: function link(scope, element, attr){

          scope.drawChart = function(){    
            var chartData = scope.data; //undefined
            console.log(chartData);
          };
          // mapping the directive funtion to contorller
          scope.setFn({theDirFn: scope.drawPSA});
        }
    }
});

HTML

<chart data= 'data' set-fn="setDirectiveFn(theDirFn)"></chart>

我似乎无法找到解决这个问题的方法,更重要的是,我不确定问题出在哪里......

1 个答案:

答案 0 :(得分:0)

终于解决了这个问题。这是承诺链的问题。我将控制器search函数内的指令函数调用包装到一个匿名函数中。现在数据正在通过。

$scope.search = function(){
    $scope.RetreivedData = getDataFactory.getTheData()
        .then(function successCallback(response){
            $scope.data = response.data;
         })
         .then(function(data){
            $scope.directiveFn($scope.data)
         })
};