Question

我试图将显示页面上显示的列表信息传递到该页面上的模式。

我成功创建了工厂服务，它返回了一个对象。

angular.module('articles').factory('ProductService', [ '$resource', 'Articles','$stateParams', function($resource, Articles, $stateParams) {
    var listingInfo = 
        Articles.get({
        articleId: $stateParams.articleId
      });
        return listingInfo;
    }
]);

（使用angular.element(document.body).injector().get('ProductService')记录）

如果我将其放在我的主ArticlesController中，我可以通过浏览器控制台angular.element($0).scope()查看范围，并能够通过注入我的控制器并为其指定范围来访问该对象$scope.product = ProductService;的{{1}}，允许我以预期的方式访问数据（product.furtherinfo）。

然而，当我为模态控制器尝试相同的技术时，我在浏览浏览器或通过绑定或括号访问数据时无法找到范围。

我已经尝试通过解决方案传递值，在我的所有控制器中注入依赖关系，但是没有任何效果。

// Modals
angular.module('articles').controller('ModalDemoCtrl',['$scope', '$modal', '$log', 'ProductService' , function ($scope, $modal, $log, ProductService) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.product = ProductService;

  $scope.animationsEnabled = true;

  $scope.open = function (size) {

    var modalInstance = $modal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        },
        product: function () {
          return $scope.product;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };

  $scope.toggleAnimation = function () {
    $scope.animationsEnabled = !$scope.animationsEnabled;
  };

}]);

我的想法是将返回的工厂对象传递给我的模态，这样我就可以将它链接到一个输入（可能是隐藏的），我可以指定它作为模型发送到电子邮件。

angular.module('articles').controller('ModalInstanceCtrl',['$scope', '$modalInstance', 'items', '$http', 'product','ProductService','$stateParams', function ($scope, $modalInstance, items, $http, product,ProductService,$stateParams) {
$scope.items = items;
$scope.product = product;
$scope.sendMail = function(){
var data = ({
      input : this.contactAgentInput,
      inputBody : this.contactAgentInputBody,
    }) 

    $http.post('/contact-agent', data).
    then(function(response) {
    // this callback will be called asynchronously
    $modalInstance.close($scope.selected.item);

    console.log("all is well")
    // when the response is available
  }, function(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  })
  }
$scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
}]);

Answer 1

使用调试器或console.log。如果在模态控制器中添加console.log（ProductService），它应该显示正在注入服务。 - Anid Monsur

感谢@AnidMonsur的建议，我注意到我的租赁控制器在销售展示页面中被解雇（我将模块拆分为销售和租赁）。以为我可能会从错误的模块中启动模态。现在调查。 - Meir Snyder

@AnidMonsur做到了！我使用相同的名称作为一些模态控制器（很明显很愚蠢）它必须启动错误的模态实例，这就是我无法访问该对象的原因。给它们不同的名字后，它现在有效。非常感谢，会花一天时间忽略错误！ - Meir Snyder

Answer 2

让我猜一下。您正尝试通过ModalInstanceCtrl显示ModalDemoCtrl中的项目，但您无法。

看起来你认为DI只要你输入依赖关系的名称就可以工作，但直到你注册依赖关系本身。所以＆＃39; items＆＃39;永远不会成为一个依赖项，你得到的只是控制器内部$ scope的值（可能是未定义的）。

在你的情况下，我说你注册了一个第三方工厂（更接近单身），它可以像ProductService一样注入，最终会被称为ItemsFactory。

希望它有所帮助。

绑定到Scope的Angular Factory对象不会出现在Modal中

2 个答案: