angular.js - angular雙向綁定機制異常
問題描述
目前項目為當頁面應用admin,因為使用angular不是很多,但也做過一個項目。屬于原理不是很懂,但大概怎么知道使用的水平。最近遇見了一個讓我比較差異的問題。一直找不到問題的所在所以來此求angular的點評下我的異常,或者說angular的雙向綁定機制。
很簡單的一個table列表,我目前的增刪改查的功能大概步驟是這樣的:查詢:查詢新增:新增----新增成功后再一次調用一次查詢,實現了添加數據后立馬列表就成功顯示出來了不需要刷新。修改,刪除也是和新增一樣,成功后再一次調取查詢,更新一下數據列表。代碼如下: `
angular.module(’index_area’).controller(’GoodlistCtrl’,GoodlistCtrl);GoodlistCtrl.$inject = [’$state’,’GoodResource’,’PublicResource’,'$stateParams'];function GoodlistCtrl($state,GoodResource,PublicResource,$stateParams) {
document.title ='基礎商品列表';var vm = this;vm.pagecount; //分頁總數vm.pageint=1; //當前分頁導航vm.skip=0 //從第幾個開始vm.limit=12;//從第幾個結束vm.list;//獲取頁面坐標vm.index=$stateParams.index; PublicResource.navclass(vm.index)//分頁點擊事件vm.pageChanged = function(){ }//獲取sessionIdvm.seid=PublicResource.seid('cw19931024');//新增商品vm.addinfo = function(list){ GoodResource.addlist(list,vm.seid).then(function(data){console.log(data) })}//查詢基礎商品列表info_list(vm.seid);/**
基礎商品集合
@param {Object} seid*/
info_list(){
GoodResource.list(vm.seid,vm.skip,vm.limit).then(function(data){ vm.list=data.result; console.log(data.result) })
}
vm.getmack = function(id){
$state.go('/good/format',{'id':id})
}
vm.delinfo = function(id){
layer.confirm(’您確定要刪除數據?’, { btn: [’確定’,’取消’] //按鈕 }, function(){ remove(id); });
}
remove(id){
GoodResource.dellist(vm.seid,id).then(function(data){ console.log(data)if (data.status=='OK') { layer.msg(’刪除成功~’, {icon: 1}); info_list(vm.seid); layer.closeAll(); } else{ layer.msg(’刪除異常,請聯系管理員~’, {icon: 0}); } })
}}
`可以看出刪除在刪除代碼:`function remove(id){
GoodResource.dellist(vm.seid,id).then(function(data){console.log(data) if (data.status=='OK') {layer.msg(’刪除成功~’, {icon: 1}); info_list(vm.seid); layer.closeAll();} else{ layer.msg(’刪除異常,請聯系管理員~’, {icon: 0});} })}`
當我判斷成功后立馬info_list()調用了一次查詢,但是結果卻是頁面的數據沒有及時更新,而是我第二次觸發刪除的時候他才更新了之前的數據。請問這個問題是什么原因呢?是因為angluar的渲染機制嗎?但是為什么我新增或者查詢的時候它能及時更新過來呢?
這是返回查詢的最新數據,顯示我確實是刪除成功了,但是為什么就是無法同步就刷新呢?
問題解答
回答1:謝邀吧!不過,你這代碼貼的,我都醉了,還真是難看懂。
大概理了一下,你可以試著改改:
GoodlistCtrl.$inject = [’$scope’, ’$state’,’GoodResource’,’PublicResource’,'$stateParams'];function GoodlistCtrl($scope, $state,GoodResource,PublicResource,$stateParams) { function info_list(){GoodResource.list(vm.seid,vm.skip,vm.limit).then(function(data){ vm.list=data.result; $scope.$apply(); console.log(data.result);}); }}
相關文章:
1. nignx - docker內nginx 80端口被占用2. docker api 開發的端口怎么獲取?3. docker images顯示的鏡像過多,狗眼被亮瞎了,怎么辦?4. dockerfile - [docker build image失敗- npm install]5. golang - 用IDE看docker源碼時的小問題6. 關于docker下的nginx壓力測試7. 在windows下安裝docker Toolbox 啟動Docker Quickstart Terminal 失敗!8. dockerfile - 為什么docker容器啟動不了?9. macos - mac下docker如何設置代理10. docker網絡端口映射,沒有方便點的操作方法么?
