我正在創建一個應用程序,其中Ajax請求從服務器獲取軟件包列表並顯示它們。 之後,我創建了一個名爲「packageDetails」的指令,將其應用於單個包。指令中的調用控制器函數不會更新視圖
該指令必須做兩件事情:通過Ajax請求
1-取從服務器的細節元素被點擊
2 - 當從網頁的其他地方拿起一些HTML,只是將其插入旁邊的包被點擊。
我的問題:點擊一個包AJAX請求正在從服務器獲取詳細信息,正在操作DOM。我還可以看到範圍變量$scope.packageDetails
在控制器中得到更新。但這些更改並不反映在視圖中。 但是,如果我再次點擊一個包,視圖會在這次更新。
我迄今爲止嘗試:
二手範圍$適用於既提供指導和控制。這似乎是其他開發者最常見的問題,但沒有解決我的問題。
嘗試使用ng-click元素但沒有運氣。
下面是代碼:
控制器
/*
an array that creates the rows and columns
$scope.packageList = [];
*/
$scope.getPackageDetails = function (packageId) {
console.log('get details for ' + packageId);
ajaxService.getPackageDetails(packageId).then(function (data) {
if (parseInt(data.ResponseStatus, 10) === 0) {
$scope.packageDetails = data.Packages;
// i have tried $scope.$apply() here; doesn't work
}
});
查看
<div class="row" ng-repeat="columnPackages in packageList">
<div class="col-md-3 onePackage" ng-repeat="package in columnPackages" package-details package-id="{{package.Id}}" click="getPackageDetails" has-response="response" >
<figure>
<a class="package_view">
<strong>{{package.Name}}</strong>
</a>
</figure>
</div>
</div>
指令
epApp.directive('packageDetails', function() {
return {
scope:
{
hasResponse: '=hasResponse',
click: '=click'
},
link: function (scope, elem, attrs) {
if (scope.$parent.$last) {
$(elem).parent('div.row').find('div.onePackage').on('click', function() {
/* some dom manipulation */
var packages_content = jQuery('.packages_widget_append').html();
jQuery(this).closest(".row").after(packages_content);
/* called parent controller function to get the details*/
console.log('clicked ' + parseFloat(attrs.packageId));
scope.click(parseFloat(attrs.packageId));
// i have tried $scope.$apply() here as well; doesn't work
});
}
}
}
});
請幫忙。
謝謝。
當你調用$申請你得到一個錯誤?你有沒有嘗試過使用$ timeout(而不是延遲)呢? – c0bra
如果我在調用中調用$ apply,那麼沒有錯誤,但是如果我在收到響應後立即從控制器調用它,則會收到錯誤'錯誤:[$ rootScope:inprog] http://errors.angularjs.org/1.2。 28/$ rootScope/inprog?p0 =%24digest z/<@http://localhost/EPV2/js/vendor/angular.min.js:6:450'。 – noob
正如c0bra所提到的,嘗試將它包裝在$ timeout中,不要拖延。這不會給你消化進度中的錯誤。 –