将变量传递给AngularJS控制器，最佳实践？

10 浏览
0 Comments

将变量传递给AngularJS控制器，最佳实践？

我是AngularJS的新手，迄今为止，我很喜欢它，尤其是模型/视图绑定。我想利用这一点来构建一个简单的“添加到购物篮”功能。

这是我到目前为止的控制器：

function BasketController($scope) {
    $scope.products = [];
    $scope.AddToBasket = function (Id, name, price, image) {
        ...
    };
}

这是我的HTML：

添加到购物篮

现在这个功能是可以工作的，但我非常怀疑这是否是在我的模型中创建新产品对象的正确方式。然而，这就是我缺乏AngularJS经验的地方。

如果这不是正确的方法，那么最佳实践是什么？

0

3 答案

0 Comments

在AngularJS中，将变量传递给控制器是一个常见的问题。通常，人们使用工厂或服务来解决此问题。然而，有人提出了一种使用简单的JavaScript类作为购物车的解决方案，这个类扩展了Array。他们认为这种方法更简洁、更漂亮，比使用工厂或服务更好。

他们创建了一个名为Basket的类，它继承了Array，并实现了一些方法，如add、remove、contains和indexOf。然后，在控制器中初始化这个类，并创建一个用于添加商品到购物车的函数。最后，在HTML中使用ng-click将商品对象传递给这个函数。

虽然这种方法看起来很简洁，但它有一些问题。首先，这个类没有利用AngularJS的双向数据绑定功能。其次，它没有提供可重用性。如果我们想在其他控制器或服务中使用购物车，就需要重复编写相同的代码。此外，使用类来处理数据可能会导致一些问题，例如无法正确触发AngularJS的脏检查机制。

因此，尽管该方法可能在某些情况下有效，但使用工厂或服务仍然是更好的实践。工厂或服务提供了更好的可维护性、可扩展性和可重用性。它们还可以利用AngularJS的依赖注入功能，使代码更加模块化和可测试。

总结起来，将变量传递给AngularJS控制器的最佳实践是使用工厂或服务。这些解决方案提供了更好的可维护性、可扩展性和可重用性，同时还能充分利用AngularJS的功能。虽然有人提出了使用JavaScript类的方法，但它可能会导致一些问题，并且不如工厂或服务来得灵活和强大。

0
0 Comments

原因：

问题的出现是因为用户想要了解如何将变量传递给AngularJS控制器，并且希望找到解决这个问题的最佳实践方法。

解决方法：

为了解决这个问题，可以创建一个篮子服务，并且通常在JS中使用对象而不是大量的参数。用户可以使用以下代码示例来实现这一点：

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;    
}

通过创建一个名为`basket`的服务，用户可以将变量传递给`MyCtrl`控制器。在控制器中，用户可以使用`$scope.basket`来访问传递的变量。

然而，这种方法也有一些问题，因为创建了一个单例实例并且对于整个应用程序而言是相同的，所以在特定页面的子控制器中可能会出现冲突或已经有一些数据的服务。这种方法感觉像是为存储东西而创建了一个全局变量。

因此，使用服务来传递变量给控制器是一种解决这个问题的最佳实践方法。

0
0 Comments

问题的出现原因是ngInit指令的使用方式的改变和相关文档的更新。在以前的版本中，可以将ngInit指令与ngController指令放在同一个元素上使用，但是现在官方文档明确规定ngInit只能用于ngRepeat的特殊属性别名。这导致了一些人在使用ngInit时遇到了问题。

解决方法是将ngInit指令放在父级元素上，或者在同一个元素上使用ngInit并定义一个函数来初始化变量。其中第一种方法是官方推荐的做法，而第二种方法则是一种替代方案。

在实际应用中，可以使用静态模板和REST API来实现动态内容。通过发起HTTP请求获取数据。尽管这可能是最佳实践，但在某些情况下，页面需要动态生成。此外，如果只使用AJAX加载数据，可能会影响搜索引擎优化。因此，有人认为官方不应该将ngInit指令标记为过时，而且目前也没有找到其他替代方案（除了使用自定义指令，但实际上与ngInit几乎相同）。

0