web-dev-qa-db-ja.com

変数をAngularJSコントローラに渡す、ベストプラクティス？

AngularJSが初めてで、これまで見たもの、特にモデル/ビューバインディングが好きです。それを利用して、シンプルな「バスケットに追加」機能を構築したいと思います。

これは私のコントローラーです：

function BasketController($scope) {
    $scope.products = [];

    $scope.AddToBasket = function (Id, name, price, image) {

        ...

    };
}

そして、これは私のHTMLです：

<a ng-click="AddToBasket('237', 'Laptop', '499.95', '237.png')">Add to basket</a>

今ではこれは機能しますが、これが私のモデルに新しい製品オブジェクトを作成する正しい方法だとは非常に疑っています。しかし、これが私のAngularJSの経験の完全な欠如が影響するところです。

これがそれを行う方法でない場合、ベストプラクティスは何ですか？

javascriptjavascript-frameworkangularjs
68
Greg

バスケットサービスを作成できます。通常、JSでは、多くのパラメーターの代わりにオブジェクトを使用します。

例は次のとおりです。 http://jsfiddle.net/2MbZY/

var app = angular.module('myApp', []);

app.factory('basket', function() {
    var items = [];
    var myBasketService = {};

    myBasketService.addItem = function(item) {
        items.Push(item);
    };
    myBasketService.removeItem = function(item) {
        var index = items.indexOf(item);
        items.splice(index, 1);
    };
    myBasketService.items = function() {
        return items;
    };

    return myBasketService;
});

function MyCtrl($scope, basket) {
    $scope.newItem = {};
    $scope.basket = basket;    
}
65
Andrew Joslin

外部divで ng-init を使用できます。

<div ng-init="param='value';">
    <div ng-controller="BasketController" >
        <label>param: {{value}}</label>
    </div>
</div>

これにより、コントローラーのスコープでパラメーターが使用可能になります。

function BasketController($scope) {
        console.log($scope.param);
}
86
Andrejs

私はAngularJSの高度な知識はありませんが、私のソリューションは、Arrayを拡張する（コーヒースクリプトの意味での）カートにシンプルなJSクラスを使用することです。

AngularJSの優れた点は、以下に示すように、ng-clickで「モデル」オブジェクトを渡すことができることです。

ファクトリーを使用する利点はわかりません。CoffeeScriptクラスほどきれいではないからです。

私のソリューションは、再利用可能な目的でサービスに変換できます。しかし、それ以外の場合、工場やサービスなどのツールを使用する利点はありません。

class Basket extends Array
  constructor: ->

  add: (item) ->
    @Push(item)

  remove: (item) ->
    index = @indexOf(item)
    @.splice(index, 1)

  contains: (item) ->
    @indexOf(item) isnt -1

  indexOf: (item) ->
    indexOf = -1
    @.forEach (stored_item, index) ->
      if (item.id is stored_item.id)
        indexOf = index
    return indexOf

次に、コントローラーでこれを初期化し、そのアクションの関数を作成します。

 $scope.basket = new Basket()
 $scope.addItemToBasket = (item) ->
   $scope.basket.add(item)

最後に、ng-clickをアンカーに設定します。ここでは、オブジェクト（データベースからJSONオブジェクトとして取得）を関数に渡します。

li ng-repeat="item in items"
  a href="#" ng-click="addItemToBasket(item)"
2
Diego d'Ursel