[英]How to fire angular filter after async event
我有一個基於注入值的簡單角度濾波器。 我需要異步初始化該值,並從$http
響應中接收數據。 關鍵是,即使正確設置了該值,對過濾器進行一次評估也不會再次觸發。 我試圖將$scope.$apply()
angular.module("app").value("deferredValue", "foo");
但是在這種情況下,由於$digest
已經在執行中,所以我得到一個錯誤。 如何修復我的代碼以使其正常工作?
angular.module("app", []) .value("deferredValue", "") .filter("myfilter", ["deferredValue", function(deferredValue){ return function(input){ if(deferredValue == input) return "1234"; else return "4321"; }; }]) .controller("ctrl", ["$scope","$http", function($scope, $http){ $scope.test = "foo"; $http.get("http://www.google.com").then(function(){ angular.module("app").value("deferredValue", "foo"); }).catch(function(){ angular.module("app").value("deferredValue", "foo"); }); }])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> {{test | myfilter}} </div>
你應該使用statefull過濾器
filter("myfilter", ["deferredValue", function(deferredValue){
function filter(input){
if(deferredValue == input)
return "1234";
else
return "4321";
};
filter.$stateful = true;
return filter;
}])
使用模型,可以將其作為參數傳遞給過濾器。
app
.value("deferredObj", {value:''})
.filter("myfilter", [function(){
return function(input, defered){
if(defered == input)
return "1234";
else
return "4321";
};
}])
.controller("ctrl", ["$scope","http", 'deferredObj', function($scope, http, deferredObj){
$scope.test = "foo";
$scope.deferredObj = deferredObj;
http.get("http://www.google.com").then(function(list){
$scope.deferredObj.value = 'foo';
}).catch(function(){
$scope.deferredObj.value = 'foo';
});
}]);
標記:
{{test | myfilter : deferredObj.value}}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.