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

我感到困惑的是我已经收到的作为我的函数的参数的 carObj 通过依赖注入传递给我的控制器。 但是，为什么我必须创建一个名为 carObj 的函数并返回该变量。 看起来很混乱。 任何人都可以帮忙吗？

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 服务以及解析的 carObj 服务的模态实例创建一个控制器。

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

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

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

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