角度工廠對象綁定到未出現在Modal中的作用域

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;，允許我以預期的方式訪問數據（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我注意到我的租賃控制器在銷售展示頁面（我將這些模塊分成銷售和租賃）時發射。認爲我可能會從錯誤的模塊中啓動模態。現在調查。 - 梅爾斯奈德

@AnidMonsur做到了！我對某些模式控制器使用了相同的名稱（顯然很愚蠢），它必須啓動了錯誤的模式實例，這就是爲什麼我無法訪問該對象。給他們不同的名字後，它現在起作用。非常感謝，本來可以花費一天的時間來忽略錯誤！ - 梅爾斯奈德

Answer 2

讓我猜。您試圖通過ModalInstanceCtrl顯示ModalDemoCtrl中的項目，但不能。

看來你認爲只要你輸入了依賴的名字，DI就會工作，但是直到你註冊了依賴本身。所以'items'永遠不會是一個依賴項，所有你得到的是控制器內部$ scope中的值（可能是未定義的）。

在你的情況下，我會說你註冊了一個第三方工廠（它更接近於單例），它可以像ProductService一樣注入，最終將被稱爲ItemsFactory。

希望它有幫助。