Question

我正在使用angularjs和bootstrap来创建一个模态。模态将显示图像。我使用与图像关联的电子邮件地址通过数据库获取图像源。但是我不知道如何将信息传递给模态以获取图像本身。

html

<tr ng-repeat="employee in timeSheets">
    <td>{{employee.name}}</td>
    <td>{{employee.period}}</td>
    <td>{{employee.status}}</td>
    <td>{{employee.regHours}}</td>
    <td>{{employee.overHours}}</td>
    <td>{{employee.totHours}}</td>
    <td><div ng-controller=imageController>
        <a ng-click="imageModal(employee.username)">Attachment</a>
    </div></td>

imageControllerJS -

function imageController ($scope, $modal) {
    $scope.imageModal = function() {
        alert("inside ImageModal");
        var modalInstance = $modal.open({
            templateUrl : 'HTML/imageModal.html',

            controller : imageModalController,

        });
    };  
}

imageModal-JS

function imageModalController($scope, $http, employeeFactory,$routeParams,modalInstance) {
    $scope.params = $routeParams.username;
    $scope.getImageReturn = function(data) {
        $scope.img_source = data.path;
        alert($scope.img_source);
        //data.path;
    };
    $scope.getImage = function(email) {

        employeeFactory.getImage(email);

    };
    $scope.getImage($scope.params);
    $scope.cancel = function() {

        $modalInstance.dismiss('cancel');
    };

以下答案的更新代码

    function imageController ($scope, $modal) {
$scope.imageModal = function() {
    alert("inside loginModal");
    var modalInstance = $modal.open({
        templateUrl : 'HTML/imageModal.html',
        controller : imageModalController,
        resolve: { imageInfo: function() {return username; }}
    });
};

}

    imageModalController.$inject = ['imageInfo']
    function imageModalController($scope, $http, employeeFactory,$routeParams,modalInstance) {
$scope.imageInfo = imageInfo;
alert("imageinfo");
$scope.getImageReturn = function(data) {
    $scope.img_source = data.path;
    alert($scope.img_source);
    //data.path;
};




    Now spitting out
    ReferenceError: imageInfo is not defined
at new imageModalController (http://localhost/Employee_12_30_AngularJS/JS/imageModal.js:4:21)
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:30:346)
at Object.instantiate (

Answer 1

试试这个，在你的图片中，ctrl只需传递你需要的数据。

function imageController ($scope, $modal) {
  $scope.imageModal = function() {
    alert("inside ImageModal");
    var modalInstance = $modal.open({
      templateUrl : 'HTML/imageModal.html',

      controller : imageModalController,
      resolve: { imageInfo: function() {return thingYouSendToModal; }
   });
 };  
}

然后只需在你的模态ctrl中注入imageInfo并设置$ scope.imageInfo = imageInfo来初始化它。

Answer 2

imageControllerJS -

function imageController ($scope, $modal) {
    $scope.imageModal = function(email) {

        var modalInstance = $modal.open({
            templateUrl : 'HTML/imageModal.html',

            controller : imageModalController,
            resolve: {
                   resolved_email: function(){
                        return email;
                  }
             }

        });
    };  
}

imageModal-JS

function imageModalController($scope, $http, employeeFactory,$routeParams,modalInstance,resolved_email) {
    $scope.params = $routeParams.username;
    $scope.getImageReturn = function(data) {
        $scope.img_source = data.path;
        alert($scope.img_source);
        //data.path;
    };
    $scope.getImage = function() {

        employeeFactory.getImage(resolved_email);

    };
    $scope.getImage($scope.params);
    $scope.cancel = function() {

        $modalInstance.dismiss('cancel');
    };

将信息传递给模态

2 个答案: