У меня есть два файла:
index.html: , которые я хочу использовать пользовательская директива in:
<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() только при извлечении массива друзей?