【问题标题】:Do not understand the controllers in Angular JS不了解 Angular JS 中的控制器
【发布时间】:2016-04-07 21:32:51
【问题描述】:

这是一个我不习惯问的问题,但我觉得这是了解我正在努力解决的问题的唯一方法。如下图所示,有两个函数app.controller()app.factory(),对我来说它们似乎是相等的,即使我删除了一个部分,该函数也不会执行它的预期任务。

plunker 链接:click here(相关文件为 script.js)

这两个函数有什么区别,为什么我不能只有其中一个?我知道必须有一个简单的解释。

    app.controller('MainCtrl', ['$scope', 'ItemsService', function ($scope, ItemsService) {
    $scope.newItem = { PlateNumber: '', Description: '', Price: 0 };
    $scope.currentItem = null;

    $scope.items = ItemsService.getItems();

    $scope.addItem = function () {
        ItemsService.addItem(angular.copy($scope.newItem));
        $scope.newItem = { PlateNumber: '', Description: '', Price: 0 };
    };

    $scope.updateItem = function (id) {
        ItemsService.updateItem(id);
    };

    $scope.removeItem = function (id) {
        ItemsService.removeItem(id);
    };
}]);

app.factory('ItemsService', ['$firebase', 'FIREBASE_URI', function ($firebase, FIREBASE_URI) {
    var ref = new Firebase(FIREBASE_URI);
    var items = $firebase(ref);

    var getItems = function () {
        return items;
    };

    var addItem = function (item) {
        items.$add(item);
    };

    var updateItem = function (id) {
        items.$save(id);
    };

    var removeItem = function (id) {
        items.$remove(id);
    };

    return {
        getItems: getItems,
        addItem: addItem,
        updateItem: updateItem,
        removeItem: removeItem
    }
}]);

【问题讨论】:

标签: javascript angularjs controller firebase plunker


【解决方案1】:

仅当您需要控制器时才实例化控制器(您使用ng-controllercontrollerAs)。所以每次你切换到不同的路由或页面时,Angular 都会实例化一个控制器(它可以是被清理的同一个控制器,例如,如果你刷新页面。)

Angular 提供程序,其中有几种主要类型 - Factory 就是其中之一,它是一种在应用程序的生命周期内保留数据的方式,甚至用于在不同控制器之间传递数据。您的问题范围更像是:Provider vs Controller,而不是 Factory(这是一种类型) vs Controller。

在你上面的例子中,你有一个控制器,如果你有很多呢?如何在不一遍又一遍地编写相同代码的情况下将数据或实用程序函数传递给许多控制器?一个提供者!

这里有一些不错的链接供您查看:

Angular Provider Docs

Blog post by Tyler McGinnis explaining the above further

JSFiddle with Example of a Factory vs a Service

【讨论】:

    猜你喜欢
    • 2016-07-31
    • 1970-01-01
    • 2016-12-20
    • 2016-03-11
    • 1970-01-01
    • 1970-01-01
    • 2014-06-14
    • 2010-12-31
    • 1970-01-01
    相关资源
    最近更新 更多