我有一个场景，我需要从组件控制器绑定对象以查看来自服务的响应。
当我在html中绑定该对象时，它绑定为我初始化的空对象。但在收到回复后，它没有更新。
脚本：
(function() {
app.component('tabComponent', {
bindings: {
toggle: '<',
oUserDetails: '<'
},
templateUrl: 'components/tabComponent/tabComponent.html',
controller: tabComponentCtrl
})
function tabComponentCtrl(mainService) {
this.emailPattern = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
this.phNumberPattern = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/;
this.namePattern = /^[a-zA-Z ]{1,15}$/;
this.aEmployeeTypes = ["option1", "option2", "option3", "xyz", "abc", "lmn"];
this.toggle = true;
this.oUserDetails = {};
/* for getting json data*/
mainService.fnGerUserDetails().then(function(response) {
this.oUserDetails = response;
console.log(this.oUserDetails); //response
}, function(response) {
alert('error')
});
console.log(this.oUserDetails); //{}
/* for updating data to read only form*/
this.fnSendData = function() {
this.toggle = true;
};
}
})();
HTML：
<md-content class="tabs-color">
<md-tabs md-dynamic-height="" md-border-bottom="">
<!-- for first tab -->
<md-tab label="Tab1">
<md-content class="md-padding">
<img src="{{$ctrl.oUserDetails.img}}" height="200px" width="200px">
<div layout="column">
<form name="userForm" data-ng-submit="$ctrl.fnSendData()">
<md-input-container class="md-block">
<label>Name:</label>
<input type="text" name="userName" ng-model="$ctrl.oUserDetails.name" ng-pattern="$ctrl.namePattern" ng-readonly="$ctrl.toggle" required>
<div ng-messages="userForm.userName.$error">
<div ng-message="required">UserName is required.</div>
<div ng-message="pattern">Must be maximum 15 characters only</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label>Email:</label>
<input type="email" name="userEmail" ng-model="$ctrl.oUserDetails.email" ng-pattern="$ctrl.emailPattern" ng-readonly="$ctrl.toggle" required>
<div ng-messages="userForm.userEmail.$error">
<div ng-message="required">Email is required.</div>
<div ng-message="pattern">Email Is Invalid</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label>Phone Number:</label>
<input type="text" name="phNumber" ng-model="$ctrl.oUserDetails.phoneNumber" ng-pattern="$ctrl.phNumberPattern" ng-readonly="$ctrl.toggle" required>
<div ng-messages="userForm.phNumber.$error">
<div ng-message="required">Phone Number is required</div>
<div ng-message="pattern">Must be a valid 10 digit phone number</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label>Location:</label>
<input type="text" name="location" ng-model="$ctrl.oUserDetails.location" ng-readonly="$ctrl.toggle" ng-pattern="$ctrl.namePattern">
</md-input-container>
<label class="label">Employee Type:</label>
<md-select ng-model="$ctrl.oUserDetails.employmentType" class="md-no-underline" ng-disabled="$ctrl.toggle" md-selected-text="$ctrl.fnGetSelectedText()">
<md-optgroup label="$ctrl.aEmployeeTypes">
<md-option data-ng-repeat="type in $ctrl.aEmployeeTypes" value="{{type}}">{{type}}</md-option>
</md-optgroup>
</md-select>{{text}}
<md-input-container class="md-block" ng-if="$ctrl.oToggle.showOrg">
<label>Organization:</label>
<input type="text" name="organization" ng-model="$ctrl.oUserDetails.organization" ng-readonly="$ctrl.toggle" required>
<div ng-messages="userForm.organization.$error">
<div ng-message="required">Organization is required</div>
</div>
</md-input-container>
<md-input-container class="md-block" ng-if="$ctrl.oToggle.showExp">
<label>Experiance:</label>
<input type="text" name="location" ng-readonly="$ctrl.toggle" ng-model="$ctrl.oUserDetails.yearsOfExperiance" required>
<div ng-messages="userForm.location.$error">
<div ng-message="required">Location is required</div>
</div>
</md-input-container>
<md-input-container class="md-block" ng-if="$ctrl.oToggle.showOther">
<label>Others:</label>
<input type="text" name="others" ng-readonly="$ctrl.toggle" ng-model="$ctrl.oUserDetails.employmentType" required>
<div ng-messages="userForm.others.$error">
<div ng-message="required">Others is required</div>
</div>
</md-input-container>
<md-button type="submit" class="md-primary" aria-label="Save Data" ng-readonly="$ctrl.toggle">Send</md-button>
</form>
</div>
</md-content>
</md-tab>
</md-tabs>
</md-content>
JSON：
{
"status": 200,
"msg": "user details",
"devMsg": "token expired.",
"data": {
"img": "https://image.freepik.com/free-icon/user-image-with-black-background_318-34564.png",
"name": "xyz",
"email": "xyz@gmail.com",
"employmentType": "option2",
"phoneNumber": "9876543210",
"location": "Hyderbad",
"yearsOfExperiance": 5,
"organization": "abc"
}
}
此处$ctrl.oUserDetails绑定为{}而不是该响应。
答案 0 :(得分：1)
我想，问题是因为使用了这个＆＃39;内部回调函数。 在这里：
function tabComponentCtrl(mainService) {
var that = this;
this.emailPattern = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
this.phNumberPattern = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/;
this.namePattern = /^[a-zA-Z ]{1,15}$/;
this.aEmployeeTypes = ["option1", "option2", "option3", "xyz", "abc", "lmn"];
this.toggle = true;
that.oUserDetails = {};
/* for getting json data*/
mainService.fnGerUserDetails().then(function(response) {
that.oUserDetails = response; // assigning response to new variable.
}, function(response) {
alert('error')
});
console.log(that.oUserDetails); //{}
/* for updating data to read only form*/
this.fnSendData = function() {
this.toggle = true;
};
}
所以，这个（又名＆＃34;上下文＆＃34;）是每个函数内部的一个特殊关键字，它的值仅取决于函数的调用方式，而不取决于函数的定义方式/时间/位置。与其他变量一样，它不受词法范围的影响。
试试这个。
mainService.fnGerUserDetails().then((response)=> {
this.oUserDetails = response;
console.log(this.oUserDetails); //response
}
编辑： 使用ES6语法：
func(*URL)EscapedPath()