Question

Angular Newbie问题：

我有一个简单的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建议我使用这个JSFiddle。但它不适合我，因为我绝对需要在指令控制器中访问aB和aC的值。我需要根据它们的值来改变模板。这个JS Fiddle似乎在那里显示它们总是未定义的。

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

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请求/响应失败？

2 个答案: