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 的函数和 return 该变量。看起来很混乱。有人可以帮忙吗？

Answer 1

这是逐行细分：

$scope.checkout = function (cartObj) {

正在创建一个名为 checkout 的 $scope 变量，它引用了一个函数，以便您可以在视图中以 checkout() 的形式调用它（例如从带有 ng-click="checkout" 的按钮） .

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

var modalInstance = $modal.open({

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

UIBootstrap$modal 服务return是模态实例。 open 方法传递一个对象，该对象定义模态实例配置如下：

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

这表示模态实例应使用在相应 url 中找到的模板。

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

这为通过 $scope、$modalInstance 服务以及重要的已解析的 cartObj 服务的模态实例创建了一个控制器。

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

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

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

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

Angular-UI模态解析

Angular-UI Modal resolve

javascript

angularjs

angular-ui

angular-ui-bootstrap