Angular-UI模式解析

Question

亲爱的所有人，我是Angularjs的新手，我正在尝试创建一个模式。我在网上找到的一个例子(目前正在关注)是下面的一个，我发现它很难理解。

$scope.checkout = function (cartObj) {
  var modalInstance = $modal.open({
  templateUrl : 'assets/menu/directives/payment-processing-modal.tmpl.html',
  controller : ["$scope", "$modalInstance", "cartObj", function($scope, $modalInstance, cartObj) {
  }],
  resolve : { // This fires up before controller loads and templates rendered
    cartObj : function() {
       return cartObj;
    }
  }
});

让我感到困惑的是cartObj，它已经作为我的函数的一个参数通过依赖注入传递给了我的控制器。然而，为什么我必须创建一个名为cartObj的函数并返回该变量。这似乎令人困惑。有人能帮帮忙吗？

Answer 1

下面是逐行的细目：

$scope.checkout = function (cartObj) {

将创建一个名为checkout的$scope变量，该变量引用一个函数，以便您可以在视图中以checkout()的形式调用它(例如，从带有ng-click=“checkout”的按钮)。

向此函数传递一个名为cartObj的服务。

var modalInstance = $modal.open({

名为modalInstance的变量用于调用$modal服务打开方法。

UI Bootstrap $modal服务返回一个模态实例。向open方法传递一个对象，该对象定义模式实例配置，如下所示：

templateUrl : 'assets/menu/directives/payment-processing-modal.tmpl.html',

这表示模式实例应该使用在相应url处找到的模板。

controller : ["$scope", "$modalInstance", "cartObj", function($scope, $modalInstance, cartObj) {
  }],

这将为传递给$scope、$modalInstance服务以及解析的cartObj服务的模态实例创建一个控制器。

服务是用于在控制器之间共享数据的单例。这意味着cartObj服务只有一个版本，如果一个控制器更新了它，另一个控制器可以查询该服务并获取由任何其他控制器更新的数据。这很好，但是如果在加载控制器时需要使用服务中的某个值来初始化变量，那么它将返回undefined，因为它必须首先请求，然后等待获取数据。这就是解决方案的用武之地：

  resolve : { // This fires up before controller loads and templates rendered
    cartObj : function() {
       return cartObj;
    }
  }
});

这里使用resolve的原因可能是因为模板本身依赖于加载模板时来自cartObj的一些数据。Resolve将在控制器加载之前解析promises，这样当它加载时，数据就在那里并准备就绪。基本上，resolve简化了控制器内部模型的初始化，因为初始数据被提供给控制器，而不是控制器需要出去获取数据。

解析的cartObj是传递给modalInstance的内容，因此可以在控制器中以cartObj.someproperty的形式进行访问。