Angular-UI 模态解析 [英] Angular-UI Modal resolve

问题描述

亲爱的，我是 Angularjs 的新手，我正在尝试创建一个模态.我在网上找到的一个例子(目前正在关注)是下面的一个，我觉得很难理解.

Dear all I am new to Angularjs and I am trying creating a modal. One of the example I have found online (and currently following), is the below one, which I find difficult to understand.

$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 的函数并返回该变量.看起来很混乱.任何人都可以帮忙吗?

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 ?

推荐答案

这是逐行细分:

$scope.checkout = function (cartObj) {

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

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").

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

This function is passed a service called cartObj.

var modalInstance = $modal.open({

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

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

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

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

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

这表示模态实例应该使用在相应网址中找到的模板.

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

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

这会为传递$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.

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

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:

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

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

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.

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

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

这篇关于Angular-UI 模态解析的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！