只有AngularJS页面上的最后一条指令才能维护它's绑定
Only the last directive on an AngularJS page maintains it's binding
我有几个指令,我打算成为可重用的元素,所以我使用范围隔离。每个指令都有自己的专用控制器,它根据url从mongo中提取数据。
问题是,只有页面上的最后一个指令显示了它所绑定的数据。不管我把指令放在什么顺序,只有最后一个有效,每个都有效。例如,我确实将客户转储到日志中,但{{here}}中没有显示任何内容,除非它是页面中的最后一个指令。
我很确定这是一个范围问题,但这些都是为了重用而隔离的,那么为什么它们会相互屏蔽呢?
在代码上。。。
js
.controller('getCustomerList',function(customerIOService){
_this = this;
_this.customers = {};
customerIOService.list()
.success(function(data, status, headers, config){
_this.customers = data;
})
.error(function(data, status, headers, config){
console.log('error Data :: ');
//console.log(data);
if(status == 403){
_this.error = 'You need to be logged in to view this page.';
}else{
_this.error = 'An error occured during the customer list request.';
}
});
})
.controller('getCustomerAppointments',function(customerIOService){
_this = this;
_this.appointments = {};
customerIOService.getAppointments()
.success(function(data, status, headers, config){
_this.appointments = data;
//console.log(data);
})
.error(function(data, status, headers, config){
console.log('error Data :: ');
//console.log(data);
if(status == 403){
_this.error = 'You need to be logged in to view this page.';
}else{
_this.error = 'An error occured during the appointments list request.';
}
});
})
.controller('getCustomerSingle', function(customerIOService) {
_this = this;
_this.customer = {};
_this.updateSuccess = false;
customerIOService.one()
.success(function(data, status, headers, config){
_this.customer = data;
console.log(data);
})
.error(function(data, status, headers, config){
console.log('error Data :: ');
//console.log(data);
if(status == 403){
_this.error = 'You need to be logged in to view this page.';
}else{
_this.error = 'An error occured during the customer fetch request.';
}
});
_this.update = function(){
customerIOService.update(_this.customer)
.success(function(data, status, headers, config){
_this.customer = data;
_this.updateSuccess = true;
})
.error(function(data, status, headers, config){
console.log('error Data :: ');
//console.log(data);
if(status == 403){
_this.error = 'You need to be logged in to view this page.';
}else{
_this.error = 'An error occured during the customer update.';
}
});
}
})
.directive('customerList',function() {
return {
scope: {},
restrict:'E',
templateUrl: 'views/templates/customersList.html',
replace: true,
controller: 'getCustomerList',
controllerAs: 'ctrl'
};
})
.directive('customerSingle',function() {
return {
scope: {},
restrict:'E',
templateUrl: 'views/templates/customersSingle.html',
replace: true,
controller: 'getCustomerSingle',
controllerAs: 'singleCustCtrl'
};
})
.directive('customerAppointments',function() {
return {
scope: {},
restrict:'E',
templateUrl: 'views/templates/customersAppointmentsList.html',
replace: true,
controller: 'getCustomerAppointments',
controllerAs: 'custApptCtrl'
};
})
父html
<section>
<div class="sectionHeader oswald font-light panel panel-default panel-body panel-success text-center">Customer Update</div>
<div class="panel panel-default panel-body panel-success">
<customer-single></customer-single>
</div>
<div class="panel panel-default panel-body panel-success">
<customer-appointments><customer-appointments/>
</div>
<div class="panel panel-default panel-body panel-success">
<customer-list><customer-list/>
</div>
</section>
指令html
<span>
<a href="/appointments/create/{{custApptCtrl.customer._id}}">
<span class="fa-stack fa-lg pull-left">
<i class="fa fa-plus fa-stack-1x "></i>
</span>
Add Appointment
</a>
<table class="table table-striped">
<thead>
<tr>
<th>Caregiver</th>
<th>Start</th>
<th>End</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="appt in custApptCtrl.appointments">
<td>{{ appt.employee.lastName }}, {{ appt.employee.firstName }}</td>
<td>{{ appt.startDate }}</td>
<td>{{ appt.endDate }}</td>
<td><a href="/appointments/{{appt._id}}"><span class="glyphicon glyphicon-pencil"></span></a></td>
</tr>
</a>
</tbody>
</table>
</span>
你的controllerAs
语法对我来说有点可疑,你能试试吗:
控制器:
app.controller('xyz', function() {
var xyzVm = this;
// and now use this xyzVm instead of _this everywhere in the controller
});
然后在你的指令
.directive('customerList',function() {
return {
scope: {},
restrict:'E',
templateUrl: 'views/templates/customersList.html',
replace: true,
controller: 'xyz',
controllerAs: 'xyzVm'
};
})
所以现在您的模板可以在中继器中使用xyzVm.appointments
相关文章:
- 在VanillaJS中模拟模型双向数据绑定
- 无法通过数组映射绑定
- 主干-不管怎样,检查事件以前是否绑定过
- 用于搜索的聚合物嵌套绑定
- Angular:更新一次性绑定的数据
- 如何使用ngrepeat和双向绑定获得指令的隔离范围
- react.js中的密钥绑定
- 使用regex的jquery keydown绑定不会验证撇号和句点
- 将事件处理程序绑定到任何可能的事件
- AngularJS指令只识别双向绑定类型
- Telerik rad组合框多列数据绑定
- 对API数据使用声明性绑定
- 如何销毁/删除/取消绑定SnapSVG.js
- 在D3.js中,有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- 数据绑定:'系统Char'不包含名为'xxxxx'
- react组件中的绑定方法
- 如何将ngrepeat下的ngmodel绑定到$scope
- SAPUI5绑定问题:json文件中维护的列表项链接不起作用
- AngularJS:打开新窗口,维护双向数据绑定
- 只有AngularJS页面上的最后一条指令才能维护它's绑定