Question

尝试访问指令控制器部分中的$ http服务响应并存储在 $ scope对象中未发生的控制器，

我想在指令的链接函数

中访问这个范围变量

以下是指令代码

angular.module('baseapp')
.directive('renderTable',['loadService',function(loadService){
   return{
    scope:{},
    replace:true,
    controller:['$scope',function($scope){
        $scope.productsList={};
        $scope.init=function(){
            //$scope.productsList = loadService.productList;
            $scope.getAllProducts();
        }

        $scope.getAllProducts=function(){
            loadService.getData().then(function(response){  --- 

*//here I am getting the response and trying to store it in $scope which is not happening*

                $scope.productsList = response.products;
            });
        }

        $scope.init();
        console.log("$scope.productsList"+JSON.stringify($scope.productsList));
    }],
    link:function(scope,elem,attrs){
        console.log("scope.productsList"+JSON.stringify(scope.productsList));



    }
   }
}]);

调试代码后，我发现$ http代码调用正在执行之前，指令的整个代码正在执行（异步），所以我无法将它存储在变量中。

对于这个检查，同一个博客中的一些帖子发现了使用的建议，如承诺，也实现了它们，但面对同样的问题，一些帖子显示一些不工作的计时器....

以我能做的所有方式改变了代码

请你为我提出解决方案的一些解决方法

以下是工作正常的服务代码我可以在指令

中注入依赖项

angular.module('baseapp')
.service('loadService',function($http, $q){
var loadService = this;
    loadService.productList = {};

    return{
        getData : function(){
          return $http.get('./resources/js/products.json')

        }

    }

});

Answer 1

您可以使用$ rootScope和NgModelController执行此操作。

你的指令可能如下：

app.directive('renderTable', function () {

  return {
    restrict: 'EA',
    replace: true,
    scope: {},
    require: 'ngModel',
    controller: function ($rootScope, $http) {

      $http.get('products.json').success(function(resp) {
        $rootScope.products = resp;
        console.log("directive's controller: " + JSON.stringify($rootScope.products));
      });

    },

    link: function (scope, element, attrs, ngModelCtrl) {

      ngModelCtrl.$formatters.push(function(modelValue) {
          return modelValue;
      });

      ngModelCtrl.$render = function () {

          var products = ngModelCtrl.$viewValue;
          console.log("link function: " + JSON.stringify(products));
      }
    }
  }
});

工作插件here

请参阅NgModelController docs

Answer 2

尝试$ scope.productsList = response.data;

如何将$ http服务结果从指令的控制器传递给链接函数

2 个答案: