将变量传递给 AngularJS 控制器,最佳实践?

IT技术 javascript javascript-framework angularjs
2021-03-16 17:30:13

我是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 经验的地方。

如果这不是这样做的方法,那么最佳实践是什么?

3个回答

您可以在外部 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);
}
没有父母我不能这样做div吗?
2021-04-21 17:30:13
是的。如果您愿意,您可以将ng-init参数与ng-controller属性放在同一元素上
2021-05-02 17:30:13
我在与 ng-controller 相同的元素上使用 ng-init 时遇到问题。这是改变了还是我有什么问题?
2021-05-06 17:30:13
此答案现已弃用。如此类似答案的更新中所述,ngInit角度文档现在明确指出,唯一批准的用途ng-init是“为 ngRepeat 的特殊属性设置别名”(例如fooIndex = $index)。
2021-05-09 17:30:13
@Daryn 做事的“角度方式”是使用静态模板和 REST API 来处理动态内容。要获取数据,您需要发出 HTTP 请求并获取它(通过另一个请求)。由于这可能是最佳实践,因此在许多情况下页面是动态生成的。此外,如果您仅使用 AJAX 加载数据,则 SEO 可能是一个问题。所以我真的不认为弃用该ng-init指令有什么意义。而且我真的没有看到有 2 种方法的替代品(除了一些自定义指令,它的作用几乎与 相同ng-init)。
2021-05-18 17:30:13

您可以创建一个篮子服务。通常在 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;    
}
@AndyJoslin Angular 如何知道如何将篮子传递给 MyCtrl?
2021-04-26 17:30:13
这是有道理的 - 也只是教会了我如何做服务!好的。谢谢 - 但是如何在没有一系列 HTML 输入的情况下创建然后将对象传递给控制器​​?
2021-05-02 17:30:13
这种方法的一个问题是创建了一个单例实例,并且对于整个应用程序都是相同的,因此对于特定的页面子控制器,您可能最终会遇到冲突或服务已经拥有一些数据。感觉就像有一个全局来存储东西。
2021-05-06 17:30:13
取决于您的用例……您几乎可以按照自己的方式进行操作。
2021-05-12 17:30:13
什么是 scope.basketProperties?
2021-05-19 17:30:13

我在 AngularJS 方面不是很先进,但我的解决方案是为您的购物车使用一个简单的 JS 类(在咖啡脚本的意义上),它扩展了 Array。

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)"