ProgramingTip

AngularJS 컨트롤러에 변수 전달, 모범 사례?

bestdevel 2020. 11. 7. 10:20
반응형

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 경험이 부족한 곳입니다.

이것이 방법이 아니라면 모범 사례는 무엇입니까?


장바구니 서비스를 만들 수 있습니다. 그리고 일반적으로 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;    
}


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

나는 AngularJS에서 그다지 발전하지 않습니다. 배열을 확장하는 카트 (커피 펼쳐의 의미에서)에 대한 간단한 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)" 

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

반응형