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 的用武之地：

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

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

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