AngularJS - 從指令更新基於服務的模型

我認爲我的AngularJS應用程序的設計存在缺陷。AngularJS - 從指令更新基於服務的模型

我有一個服務，其中包含我的一個模型項目和與添加/刪除它們相關的方法。這項服務被注入到我的核心應用程序中，並且也被注入一個指令。我的問題是從指令中刪除模型中的項目。我這樣做是因爲該指令實際上代表了每個模型項目。這種變化正在發生，但它並沒有推回到暴露模型的核心應用程序。我意識到這是因爲我沒有告訴它更新，但我的問題是我真的不知道如何去做。在調用服務之後在指令中添加$apply會導致應用程序已在進行中的錯誤，所以感覺這是錯誤的方法。

我已經將我的模型放入服務中，因爲我只希望爲整個應用程序提供此數據的單個實例。

任何人都可以提出一個更好的方法來實現這一目標嗎？將模型存儲在服務中是一個好主意嗎？

服務：

angular.module("App").service("widgetService", function() { 
    this.widgets = []; 

    this.removeWidget = function() { 
     <!-- remove item from this.widgets --> 
    } 

    this.getWidgets = function() { 
     return this.widgets; 
    } 

    this.setWidgets = function(widgets) { 
     this.widgets = widgets; 
    ) 
}

核心應用：

App.controller("CoreAppController", function($scope, $http, widgetService) { 
    $scope.widgets = widgetService.getWidgets(); 
}

HTML：

<widget data-ng-repeat="widget in widgets" />

指令：

myKSS.MyKSSApp.directive("widget", function($compile) { 
    return { 
     restrict: "E", 
     replace: true, 
     templateUrl: "partials/Widget.html", 
     scope: { 
     }, 
     controller: function($scope, $element, $attrs, widgetService) { 
      $scope.removeWidget = function() { 
       widgetService.removeWidget(); 
      }; 
     } 
    } 
}

來源

2013-02-05 jwest

您可以通過使用$ rootScope來簡化你的生活。通常不建議使用服務作爲數據存儲。 $ rootScope已經是頁面模型的一部分，並且在更改它時應該更新所有內容。 –

嗯，謝謝。因此，要問一個可能愚蠢的問題，爲什麼不建議將數據存儲在服務中？我可以看到爲什麼$ rootScope將是一個明智的選擇。 – jwest

主要是因爲$ rootScope專門用於存儲可以保存到所有控制器/視圖的數據。這並不是說你「永遠不應該」，只是這樣做通常沒有好處，除了可能的一些隔離/私有化之外。 –

有一件事我已經通知：你不應該給一個可能改變服務widgets變量的值 - 否則，你無法跟蹤新增/移除（我的意思是服務的this.setWidgets方法應該被刪除）

其他一切應該工作（與其他一些小的變化）：http://plnkr.co/edit/fQMwfI5d7nikjhXTXSC6?p=preview

來源

2013-02-05 14:39:23

感謝Valentyn，當然的確如我所願。然而，這很有趣 - 你爲什麼要在Controller中添加項目而不是服務？當然這不會將所有相關功能封裝到服務中？這基本上告訴我，我不應該在服務中擁有模型。 – jwest

我已更新plunker將數組的實際修改移到了服務中，因此隱藏瞭如何在其中添加小部件的方式。 –

發佈此問題之前，我的代碼幾乎完全相同。我可以看到沒有明顯的差異，但刪除項目不會更新視圖。如果我遇到任何問題，我會盡力解決併發布更新程序。謝謝。 – jwest

AngularJS - 從指令更新基於服務的模型

回答

相關問題