javascript - Why does AngularJS directive work with hardcoded values but fail with http request/response? -
angular newbie question:
i have simple angularjs test application shows how controller , directive work together. controller sets hardcoded values ab , ac on scope , directive displays these values in html. works. here jsfiddle. code below. when run it, can see console output expected:
js line #63: this.ab = null js line #64: this.ac = goodbye js line #63: this.ab = hello js line #63: this.ac = world however, when change hardcoded values ones retrieved test api, fails. console output follows:
js line #63: this.ab = null js line #64: this.ac = goodbye js line #63: this.ab = undefined js line #63: this.ac = undefined the change made (seen here in new jsfiddle) in controller's myfunc function: replaced hardcoded values following:
response = $http.post('http://jsonplaceholder.typicode.com/posts', { 'xxxxx': 'yyyyyyy' } ) self.scopeab = response.id; self.scopeac = response.id; i have tested api's response via curl , working fine. why directive report values of ab , ac undefined? how solve problem? can tell has asynchronous nature of http call. don't know how make work correctly.
html:
<body ng-app="myapp"> <div ng-controller="myctrl 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> working 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 suggested use jsfiddle. won't work me because absolutely need values of ab , ac accessible in directive's controller. need vary template based on values. js fiddle seems show them undefined in there.
claies suggested use jsfiddle. won't work me because absolutely need values of ab , ac accessible in directive's controller. need vary template based on values. js fiddle seems show them undefined in there.
if use @claies methodology, need put $watch on object fires when $http request resolves.
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); }); the demo on jsfiddle.
frankly think better off following advice @jumbopap. use httppromise , .then method , retrieve data onfulfilled function.
Comments
Post a Comment