为什么 AngularJS 指令对硬编码值有效，但对 http request/response 无效？

Question

Angular新手问题：

我有一个简单的 AngularJS 测试应用程序，它展示了控制器和指令如何协同工作。控制器在作用域上设置一些硬编码值 aB 和 aC，然后指令在 HTML 中显示这些值。有用。这里是JSFiddle。代码如下。当你运行它时，你可以看到控制台输出符合预期：

JS line #63: this.aB =  null
JS line #64: this.aC =  Goodbye
JS line #63: this.aB =  Hello
JS line #63: this.aC =  World

但是，当我将硬编码值更改为从测试 API 中检索到的值时，它失败了。控制台输出如下：

JS line #63: this.aB =  null
JS line #64: this.aC =  Goodbye
JS line #63: this.aB =  undefined
JS line #63: this.aC =  undefined

我所做的唯一更改（在这个新 JSFiddle 中看到）是在控制器的 myFunc 函数中：我用以下内容替换了硬编码值：

  response = $http.post('http://jsonplaceholder.typicode.com/posts',
    {
      'XXXXX': 'YYYYYYY'
    }
  )    
  self.scopeAB = response.id;
  self.scopeAC = response.id;

我已经通过 curl 测试了 API 的响应，它工作正常。那么为什么指令将 aB 和 aC 的值报告为 undefined？我该如何解决这个问题？我可以说这与 HTTP 调用的异步性质有关。但是我不知道如何让它正常工作。

HTML:

<body ng-app="myApp">
  <div ng-controller="MyCtrl as ctrl">
    <div ng-view></div>
    <ul>
      <li>{{1+1}}</li>
      <li><my-directive a-b="null" a-c="'Goodbye'"></my-directive></li>
      <li><my-directive a-b="ctrl.scopeAB" a-c="ctrl.scopeAC"></my-directive></li>
      ab = {{ctrl.scopeAB}}, ac = {{ctrl.scopeAC}}
    </ul>
  </div>
</body>

工作Javascript：

myApp = angular.module('myApp',[]);
myApp.directive('myDirective',function(){
    return {
      restrict:'E',
      scope: {
        aB: '=',
        aC: '='
      },
      controller: 'DirectiveCtrl',
      controllerAs: 'dirCtrl',
      bindToController: true,
      template: 'aB={{dirCtrl.aB}} aC={{dirCtrl.aC}} <input ng-model="dirCtrl.aB" />'
    };
  }
);

myApp.controller('DirectiveCtrl', function(){
    var self = this;
    console.log('this.aB = ', self.aB);
    console.log('this.aC = ', self.aC);
})

myApp.controller('MyCtrl', function() {
    var self = this;
    self.myFunc = function() {
      self.scopeAB = 'Hello';
      self.scopeAC = 'World';
    }();
  }
);

更新： Claies 建议我使用这个 JSFiddle。但它对我不起作用，因为我绝对需要在指令的控制器中访问 aB 和 aC 的值。我需要根据它们的值改变模板。这个 JS Fiddle 似乎在那里显示它们总是未定义的。

Answer 1

您应该阅读 $http service 上的文档。该调用是异步的，您在 then 回调

中处理成功响应

$http.post('http://jsonplaceholder.typicode.com/posts', {'XXXXX': 'YYYYYYY'})
   .then(function(response) {
      self.scopeAB = response.data.id;
      self.scopeAC = response.data.id;
   })

Answer 2

Claies suggested I use this JSFiddle. But it won't work for me because I absolutely need the values of aB and aC to be accessible in the directive's controller. I need to vary the template based on their values. This JS Fiddle seems to show them as always undefined in there.

如果您使用 @Claies 方法，您需要在 $http 请求解析时触发的对象上放置一个 $watch。

myApp.controller('DirectiveCtrl', function($scope){
    var self = this;
    $scope.$watch(function() {return self.scopeObject}, function (objVal) {
        console.log("watch fired");
        console.log('objVal.aB = ', objVal.aB);
        console.log('objVal.aC = ', objVal.aC);    
    },true);

});

DEMO on JSFiddle.

坦率地说，我认为你最好听从 @jumbopap 的建议。使用 httpPromise 和 .then 方法并从 onFulfilled 函数中检索数据。

为什么 AngularJS 指令对硬编码值有效，但对 http request/response 无效？

Why does AngularJS directive work with hardcoded values but fail with http request/response?

javascript

angularjs

angular-directive

angular-promise

angular-controller