Angular-UI模态解析

Question

亲爱的我是Angularjs的新手，我正在用Angular创建模式。我在网上发现的一个例子如下，我很难理解

$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 service open方法。

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将在控制器加载之前解决承诺，以便当控制器加载数据时就可以准备就绪。基本上，resolve简化了控制器内部模型的初始化，因为初始数据被提供给控制器，而不是控制器需要外出并获取数据。

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