Javascript Angular-UI 模态解析

Angular-UI Modal resolve

提问by Muhammad Raihan Muhaimin

Dear all I am new to Angularjs I am creating a modal with Angular. One of the example I found online is following which I have difficulty understanding

亲爱的，我是 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;
    }
  }
});

What I am confused about is cartObj which I already received as a parameter for my function is passed to my controller through dependency injection. However why I have to create a function named cartObj and return that variable. It seems confusing. Can anyone please help ?

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

回答by jme11

Here's the line-by-line breakdown:

这是逐行细分：

$scope.checkout = function (cartObj) {

A $scope variable named checkout is being created which references a function so that you can call it in the view as checkout()(for example from a button with ng-click="checkout").

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

This function is passed a servicecalled cartObj.

这个函数被传递一个名为cartObj的服务。

var modalInstance = $modal.open({

A variable called modalInstance is used to call the $modal service open method.

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

The UI Bootstrap $modal service returns a modal instance. The open method is passed an object that defines the modal instance configuration as follows:

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

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

This says that the modal instance should use the template found at the respective url.

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

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

This creates a controller for the modal instance that is passed the $scope, the $modalInstance service and, importantly, the resolved cartObj service.

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

Services are singletons that are used to share data across controllers. That means that there is one version of the cartObj service and if one controller updates it, another controller can query the service and get the data that was updated by any other controller. That's great, but if a variable needs to be initialized with some value from the service when the controller loads, it will return undefined because it has to first ask for and then wait to get the data back. That's where resolve comes in:

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

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

The reason here for using resolve is probably because the template itself is dependent upon some data from the cartObj being available WHEN the template is loaded. Resolve will resolve the promises BEFORE the controller loads so that when it does, the data is there and ready. Basically, resolve simplifies the initialization of the model inside a controller because the initial data is given to the controller instead of the controller needing to go out and fetch the data.

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

The resolved cartObj is what is passed to the modalInstance and can therefore be accessed in the controller as: cartObj.someproperty.

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