Question

我认为我的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();
            };
        }
    }
}

Answer 1

我注意到有一件事：您不应该更改widgets服务变量的值 - 否则您无法跟踪添加/删除（我的意思是this.setWidgets方法应该删除服务）

其他一切都应该有效（还有一些其他的小改动）：http://plnkr.co/edit/fQMwfI5d7nikjhXTXSC6?p=preview

AngularJS - 从指令更新基于服务的模型

1 个答案: