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
'ProgramingTip' 카테고리의 다른 글
두 날짜의 차이 (초) (0) | 2020.11.07 |
---|---|
iframe 이로 드 또는 콘텐츠가 있는지 확인하는 방법은 무엇입니까? (0) | 2020.11.07 |
navigateUpFromSameTask ()를 사용하여 활동에서 복귀 (0) | 2020.11.07 |
테이블 열 크기 조정 (0) | 2020.11.07 |
첫 단어를 선택 / 스타일링하는 CSS (0) | 2020.11.07 |