Question

我有两个文件：

index.html：我想在自定义指令中使用

<body>   
    <div ng-controller="friendsController">
        <random-friend friends="friends" title="'Random Friend'"></random-friend>
    </div>
</body>

app.js：，其中包含：

控制器：有$scope.friends，其值异步，并将在自定义指令中使用。
自定义指令，每次加载页面时都会输出一个随机的朋友（元素）。

代码：

// Module
const myApp = angular.module('myApp', []); 

// Custom Directive
myApp.directive('randomFriend', [function() {
    return {
        restrict: 'E',
        scope: {
            friends: '=',
            title: '='
        }, 
        template: `<h4>{{friends[randomIndex]}}</h4>`,
        controller: function generateRandomNumber($scope) {
            $scope.randomIndex = Math.floor(Math.random() * $scope.friends.length); // TypeError: Cannot read property 'length' of undefined
        }
    };
}]);

// Controller 
myApp.controller('friendsController', ['$scope', $scope => {
    $http.get('data/friends.json').then(function(response) {
        $scope.friends = response.data;
    });
}]);

问题是，当代码到达$scope.friends.length时，控制台会返回错误“TypeError：无法读取未定义的属性'长度'，因为尚未检索到请求数据。
那么，如何在检索好友数组时运行函数generateRandomNumber()？

Answer 1

您可以使用ng-if

处理此问题

 <div ng-controller="friendsController">
  <div ng-if="friends.length > 0">
        <random-friend friends="friends" title="'Random Friend'"></random-friend>
  </div>
 </div>

Angular：如何在异步检索数据时运行函数？

1 个答案: