Question

为了使用Angular JS，我尝试将Factory用于我的数据堆栈......

现在，它不起作用。我刚刚将一个简单的json数据放在工厂返回，然后

脚本已停止工作。这是angularjs的最基本的例子，因为它使用json

重复并迭代。

以下是我写过的所有棱镜：

var Item = angular.module("Item", ['ngRoute']);

Item.config(function($routeProvider){
    $routeProvider
        .when("/add", {
            controller : "ItemController",
            templateUrl : "index.html"
        })
        .when("/edit", {
            controller : "ItemController",
            templateUrl : "index.html"
        });
});

Item.factory("ItemsFactory", function(){

    var items = [
        { name : "Washing Powder",
        price : "2000",
        balance : 14
        },

        { name : "Shampoo",
          price : "8500",
          balance : 03
        },

        { name : "Soap",
          price : "1850",
          balance : 27
        }
    ];

    var factory = {};

    factory.getItems() = function(){
        return items;
    };

    factory.postItems() = function(){
        // POST items
    };

    return factory;

});


Item.controller("ItemController", function($scope, ItemsFactory){
    $scope.items = ItemsFactory.getItems();

    init();

    function init()
    {
        $scope.items = ItemsFactory.getItems();
    }


    $scope.AddNewItem = function(){
        $scope.items.push({
            name : $scope.NewItem.name,
            price : $scope.NewItem.price
        });
    };
});

这是HTML标记：

<!DOCTYPE html>
<html >
<head>
    <title>Practicing AngularJS Framework...!</title>
    <script src="angular.js" type="text/javascript"></script>
    <script src="ngroute.js" type="text/javascript"></script>
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body data-ng-app="Item">
        <div data-ng-controller="ItemController">
            <div data-ng-repeat="each in items">
                <p>Item {{ each.name }} costs {{ each.price }}.</p>
            </div>
            <div>
                <input type="text" data-ng-model="NewItem.name" />
                <input type="text" data-ng-model="NewItem.price" />
                <br />
                <input type="submit" value="Add Item" data-ng-click="AddNewItem()" />
            </div>
        </div>
</body>
</html>

它没有加载json内容以立即重复它们......没有任何反应......

Answer 1

我认为最好使用这样的东西在服务中返回值：

Item.factory("ItemsFactory", function(){

 var items = [
    { name : "Washing Powder",
    price : "2000",
    balance : 14
    },

    { name : "Shampoo",
      price : "8500",
      balance : 03
    },

    { name : "Soap",
      price : "1850",
      balance : 27
    }
];

return {
   getItems: function(){
    return items;
   },

postItems:function(){

}
});

它也认为：

 factory.getItems() = function(){}

错了，正确的是：

 factory.getItems = function(){}

AngularJS工厂问题

1 个答案: