Javascript 无法访问由$http.get in指令设置的作用域属性_Javascript_Angularjs_Angularjs Directive_Angularjs 1.6

Javascript 无法访问由$http.get in指令设置的作用域属性

javascript angularjs

Javascript 无法访问由$http.get in指令设置的作用域属性,javascript,angularjs,angularjs-directive,angularjs-1.6,Javascript,Angularjs,Angularjs Directive,Angularjs 1.6,我正在使用这个app.js文件： var myNinjaApp = angular.module('myNinjaApp', []); myNinjaApp.directive('randomNinja', [function(){ return { restrict: 'E', scope: { theNinjas: '=', title: '=' }, template: '<img ng-src="{{theNinjas[

我正在使用这个app.js文件：

var myNinjaApp = angular.module('myNinjaApp', []);

myNinjaApp.directive('randomNinja', [function(){
  return {
    restrict: 'E',
    scope: {
      theNinjas: '=',
      title: '='
    },
    template: '<img ng-src="{{theNinjas[random].thumb}}"/>',
    controller: function($scope) {
      let length = $scope.theNinjas.length; //$scope.theNinjas is undefined
      $scope.random = Math.floor(Math.random() * length);
      console.log($scope.random);
    }
  };
}]);

myNinjaApp.controller('NinjaController', ['$scope', '$http', function($scope, $http) {  
    $http.get('data/ninjas.json').then(function(data){
      $scope.ninjas = data.data;
    });
}]);

var myNinjaApp=angular.module（'myNinjaApp'，[]）；
myNinjaApp.directive（'randomNinja'，[function（）{
返回{
限制：'E'，
范围：{
然后加上：“=”，
标题：'='
},
模板：“”，
控制器：功能（$scope）{
let length=$scope.thenijas.length；//$scope.thenijas未定义
$scope.random=Math.floor（Math.random（）*长度）；
log（$scope.random）；
}
};
}]);
myNinjaApp.controller（'NinjaController'，['$scope'，'$http'，函数（$scope，$http）{
$http.get（'data/ninjas.json'）。然后（函数（数据）{
$scope.ninjas=data.data；
});
}]);

以及这个index.html文件：

<!DOCTYPE html>
<html lang="en" ng-app="myNinjaApp">
  <head>
    <title>TheNetNinja Angular Playlist</title>
    <link href="content/css/styles.css" rel="stylesheet" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-route/1.7.9/angular-route.min.js"></script>
    <script src="app\app.js"></script>
  </head>
  <body ng-controller="NinjaController">  
    <random-ninja the-ninjas="ninjas" title="'Random Ninja'"></random-ninja>
  </body>
</html>


网络忍者角度播放列表

我注意到指令的控制器代码中，

$scope.theNinjas

未定义，但

标题

未定义

调试代码时，我可以看到在读取

$scope.thenijas.length

之后进行了

$http.get（）

调用

如何获取指令控制器中数组的长度？

您的问题是，

$http.get

是异步的

$http.get('data/ninjas.json').then(function(data){
   $scope.ninjas = data.data;
});

因此，您会得到一个响应，即初始化

$scope.ninjas

并延迟

您可以选择两种解决方案：

[解决方案1]

当

ninjas

不是

undefined

时，使用

ng if

初始化指令

<random-ninja 
  ng-if="ninjas"
  the-ninjas="ninjas" 
  title="'Random Ninja'">
</random-ninja>

另一种方法是使用

$onChanges

生命周期挂钩：

myNinjaApp.directive('randomNinja', [function(){
  return {
    restrict: 'E',
    scope: {
      ̶t̶h̶e̶N̶i̶n̶j̶a̶s̶:̶ ̶'̶=̶'̶,̶ 
      theNinjas: '<',
      title: '<'
    },
    template: '<img ng-src="{{theNinjas[random].thumb}}"/>',
    controller: function($scope) {
      this.$onChanges = function(changesObj) {
        if (changesObj.theNinjas) {
          let length = changesObj.theNinjas.currentValue.length;
          $scope.random = Math.floor(Math.random() * length);
          console.log($scope.random);
        };
      };
    }
  };
}]);

myNinjaApp.directive（'randomNinja'，[function（））{
返回{
限制：'E'，
范围：{
̶t̶h̶e̶N̶i̶N̶j̶a̶s̶:̶̶=̶̶
Thenijas:“解决方案1运行得非常好：）甚至不需要尝试解决方案2。@davidklempfner很高兴听到：）
myNinjaApp.directive('randomNinja', [function(){
  return {
    restrict: 'E',
    scope: {
      ̶t̶h̶e̶N̶i̶n̶j̶a̶s̶:̶ ̶'̶=̶'̶,̶ 
      theNinjas: '<',
      title: '<'
    },
    template: '<img ng-src="{{theNinjas[random].thumb}}"/>',
    controller: function($scope) {
      this.$onChanges = function(changesObj) {
        if (changesObj.theNinjas) {
          let length = changesObj.theNinjas.currentValue.length;
          $scope.random = Math.floor(Math.random() * length);
          console.log($scope.random);
        };
      };
    }
  };
}]);