web-gelistirme-sc.com

Değişkenleri AngularJS kontrolörüne ilet, en iyi yöntem?

AngularJS için yeniyim ve şu ana kadar gördüğüm gibi, özellikle de model/görünüm bağlamasını. Basit bir "sepete ekle" işlevsellik oluşturmak için bunu kullanmak istiyorum.

Bu benim denetleyicim:

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

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

        ...

    };
}

Ve bu benim HTML’m:

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

Şimdi bu işe yarıyor ama bunun benim modelimde yeni bir ürün nesnesi yaratmanın doğru yolu olduğundan şüpheliyim. Ancak bu, toplam AngularJS deneyimim eksikliğinin devreye girdiği yerdir.

Bunu yapmanın yolu bu değilse, en iyi uygulama nedir?

68
Greg

Bir sepet servisi yaratabilirsiniz. Genelde JS'de birçok parametre yerine nesneler kullanırsınız.

İşte bir örnek: 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

Dış divde ng-init kullanabilirsiniz:

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

Parametre daha sonra kontrol cihazınızın kapsamında bulunacaktır:

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

AngularJS'de çok gelişmiş değilim, ancak çözümüm, Array'i genişleten, sepeti (kahve betiği anlamında) için basit bir JS sınıfı kullanmak olacaktır.

AngularJS’in güzelliği, aşağıda gösterildiği gibi "model" nesnesini ng-click ile geçebilmenizdir.

Bir CoffeeScript sınıfından daha az hoş bulduğum için bir fabrika kullanmanın avantajını anlamıyorum.

Benim çözümüm yeniden kullanılabilir bir amaç için bir Hizmette dönüştürülebilir. Ancak aksi takdirde fabrika veya servis gibi araçları kullanmanın hiçbir avantajı göremiyorum.

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

Sonra bunu kontrol cihazınızda başlatır ve bu eylem için bir fonksiyon yaratırsınız:

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

Sonunda bir bağlantıya ng-tıklama ayarladınız, burada nesnenize (veritabanından JSON nesnesi olarak alınan) işleve geçersiniz:

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