2015-06-12 60 views
0

我正在創建一個應用程序,其中Ajax請求從服務器獲取軟件包列表並顯示它們。 之後,我創建了一個名爲「packageDetails」的指令,將其應用於單個包。指令中的調用控制器函數不會更新視圖

該指令必須做兩件事情:通過Ajax請求

1-取從服務器的細節元素被點擊

2 - 當從網頁的其他地方拿起一些HTML,只是將其插入旁邊的包被點擊。

我的問題:點擊一個包AJAX請求正在從服務器獲取詳細信息,正在操作DOM。我還可以看到範圍變量$scope.packageDetails在控制器中得到更新。但這些更改並不反映在視圖中。 但是,如果我再次點擊一個包,視圖會在這次更新。

我迄今爲止嘗試:

二手範圍$適用於既提供指導和控制。這似乎是其他開發者最常見的問題,但沒有解決我的問題。

嘗試使用ng-click元素但沒有運氣。

Plunker

下面是代碼:

控制器

/* 
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 

       }); 
      } 
     } 
    } 

}); 

請幫忙。

謝謝。

+0

當你調用$申請你得到一個錯誤?你有沒有嘗試過使用$ timeout(而不是延遲)呢? – c0bra

+0

如果我在調用中調用$ 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

+0

正如c0bra所提到的,嘗試將它包裝在$ timeout中,不要拖延。這不會給你消化進度中的錯誤。 –

回答

0

我想你想要的東西,但你不知道如何與Angular做。 您使用jQuery,但沒有它:)

你的榜樣,你可以做到這一點,我看到了兩個候選條件的解決方案:

1)你在你的控制器做

你申報指令,它嘗試做一些DOM操作,如果你決定不這樣實現,你可以用ng-show/ng-hide的combinaison來顯示/隱藏包詳細信息... 點擊可以通過ng-click進行處理。

像這樣,沒有更多的DOM操作,不需要手動做一個範圍$ apply。

2)你想用一個指令

你包的細節指令應該是Element指令去做。在它的內部,你也可以定義你的模板,並正確使用綁定。 你會傳遞你的包數組並循環它。

對於點擊處理,有兩種選擇,將您的控制器函數傳遞給您的指令或在指令中使用您的Ajax服務。我認爲第二個比第一個更容易,如果你的指令不是非常通用的,你應該考慮採用這個解決方案。

Plunker 1:http://goo.gl/rUzKWn

Plunker 2(服務):http://goo.gl/yixa7U

我不知道正確地回答你的問題,但也許這可以給你一些想法,你想要做什麼!

1

1 .:你忘了把你的函數的參數? :-)的

click="getPackageDetails(package.Id)" 

代替

click="getPackageDetails" 
相關問題