Угловой новичок Вопрос:Почему директива AngularJS работает с жестко закодированными значениями, но не работает с запросом/ответом HTTP?
У меня есть простая тестовая программа 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;
Я протестировал ответ API через curl, и он работает нормально. Так почему же директива сообщает значения 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';
}();
}
);
UPDATE: Claies предложил мне использовать эту JSFiddle. Но это не сработает для меня, потому что мне абсолютно необходимы значения aB и aC, которые будут доступны в контроллере директивы. Мне нужно изменить шаблон на основе их значений. Этот JS Fiddle, кажется, показывает им, как всегда, неопределенный там.
проблема здесь - еще одна часть углового, которая требует немного объяснения. Я прыгнул обратно в чат-канал AngularJS http://chat.stackoverflow.com/rooms/63378/angularjs, если вы хотите обсудить, что происходит, и возможные способы борьбы с ним. – Claies
Ответ здесь отвечает на вопрос, почему значения контроллера не обновляются с помощью '$ http', но это не вся картина. Что касается того, почему директива не обновляется, когда контроллер делает это, это другая тема, в которой я чувствую, что, возможно, частично вы сбились с пути при обсуждении этой темы в более ранних вопросах. – Claies
Я обновил вопрос на основе нашего последнего чата. Но проблема остается. –