Angular 绑定到范围的工厂对象未出现在模式中

Question

我正在尝试将有关显示页面上显示的列表的信息传递给该页面上的模式。

我成功创建了工厂服务，returns 我是一个对象。

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([=16=]).scope() 通过浏览器控制台查看范围，并且能够通过注入我的控制器并为其提供范围来访问该对象$scope.product = ProductService;，允许我以预期的方式访问数据 (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;
  };

}]);

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

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

让我猜猜。您试图通过 ModalInstanceCtrl 显示 ModalDemoCtrl 中的项目，但是您不能。

您似乎认为只要您输入依赖项的名称，DI 就会工作，但直到您注册依赖项本身时它才会起作用。所以 'items' 永远不会成为依赖项，你得到的只是控制器内部 $scope 中的值（可能是未定义的）。

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

希望对您有所帮助。

Answer 2

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

感谢@AnidMonsur 的建议，我注意到在销售展示页面（我将模块分为销售和租赁）时我的租赁控制器启动了。认为我可能从错误的模块启动模态。现在正在调查。 – 梅尔·斯奈德

@AnidMonsur 做到了！我对一些模态控制器使用了相同的名称（显然很愚蠢）它一定启动了错误的模态实例，这就是我无法访问该对象的原因。在给他们不同的名字后，它现在可以工作了。非常感谢，本来可以再花一天时间忽略错误！ – 梅尔·斯奈德

Angular 绑定到范围的工厂对象未出现在模式中

Angular Factory Object binded to Scope not appearing in Modal

angularjs

angularjs-scope

angular-ui-bootstrap

angular-services