Question

我在html中使用指令，我在指令＆＃39;链接中发送带有$ http的ajax，然后在chrome的控制台中发送console.log(scope.data)，undefined

这是我的代码

  todoApp.directive('planProgress', function($http) {
    return {
      scope: false,
      link: function(scope, elem, attrs) {
        $http.get('get_default_data', {
          params: {
            'type': 'day'
          }
        }).then(function(data) {
          scope.data = data.data;
        });
        console.log(scope.data);
        elem.progress();
      }
    };
  });

我console.log(scope.data)它的undefined但是，范围内有data个attr，如何在范围内获取数据？

Answer 1

在console.log内打印.then。由于$http是async。 JS不会等待它完成并执行下一行，因此你得到undefined

.then(function(data) {
          scope.data = data.data;
          console.log(scope.data);
        });

Answer 2

分解你的链接功能

    $http.get('get_default_data', {
      params: {
        'type': 'day'
      }
    }).then(function(data) {
      scope.data = data.data; 
    });

    console.log(scope.data);
    elem.progress();

您可以看到，console.log是直接运行的，而http调用是延迟的。因此，它将记录“未定义”，并且当调用返回scope.data时将具有值。

如果要查看检索的内容，请将“console.log”放入then。

但是在您的模板中，您只需访问{{data}}即可。

Answer 3

$ http是异步方法所以你的控制台会在那之前运行，所以尝试在你的块中添加，因为阻止总是在成功完成你的响应后运行

试试这个，你就会明白为什么它正在记录正确的值

todoApp.directive('planProgress', function($http) {
    return {
      scope: false,
      link: function(scope, elem, attrs) {
        $http.get('get_default_data', {
          params: {
            'type': 'day'
          }
        }).then(function(data) {
          scope.data = data.data;
        console.log(scope.data);
        });

        elem.progress();
      }
    };
  });

angularJS不能在指令中获得scope.data吗？

3 个答案: