각도로 변수 전달JS 컨트롤러, 베스트 프랙티스?

각도로 변수 전달JS 컨트롤러, 베스트 프랙티스?

Angular는 처음입니다.JS와 지금까지 본 것, 특히 모델/뷰 바인딩이 마음에 듭니다.그것을 이용해, 심플한 「바구니에 추가」기능을 구축하고 싶다고 생각하고 있습니다.

지금까지의 컨트롤러는 다음과 같습니다.

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>

이 방법은 효과가 있지만, 제 모델에서 새로운 제품 개체를 만드는 방법이 맞는지 의심스럽습니다.하지만 여기서 앵귤러 부족은JS 익스피리언스가 발휘됩니다.

이 방법이 아닐 경우 베스트 프랙티스는 무엇입니까?

외부 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);
}

바스켓 서비스를 생성할 수 있습니다.일반적으로 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;    
}

저는 AngularJS를 잘 다루지는 않지만, 간단한 JS 클래스를 사용하여 Array를 확장하는 것이 해결책입니다(커피 스크립트).

앵글의 아름다움JS는 다음과 같이 ng-click으로 "모델" 객체를 전달할 수 있습니다.

커피스크립트 수업보다 공장을 사용하는 것이 덜 예쁘기 때문에 그 장점을 잘 모르겠습니다.

재사용을 위해 서비스 내에서 솔루션을 전환할 수 있습니다.하지만 그 외에는 공장이나 서비스와 같은 도구를 사용하는 것이 어떤 이점도 없습니다.

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클릭을 설정하면 오브젝트(데이터베이스에서 JSON 오브젝트로 취득)가 함수에 전달됩니다.

li ng-repeat="item in items"
  a href="#" ng-click="addItemToBasket(item)" 

언급URL : https://stackoverflow.com/questions/11703477/pass-variables-to-angularjs-controller-best-practice