将信息传递给模态

我使用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 (

来源

2014-01-21 user2786754

你能下决心传递给您的modal.open相似，它传递给你的路由$ –

你能不能给我一个例子，所以我可以看看它是如何完成的？对不起有点新的这 – user2786754

试试这个，你的形象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; } 
    }); 
}; 
}

然后，只需注入的imageinfo你的模式CTRL内，并设置$ scope.imageInfo =的imageinfo进行初始化。

来源

2014-01-21 20:02:07 Mindstormy

我用你的代码更新了它，但现在出现错误，检查顶部的更新代码 – user2786754

你需要注入imageInfo到你的模态控制器，它应该在这一行函数imageModalController（$ scope，$ http， employeeFactory，$ routeParams，modalInstance，IMAGE INFO HERE） – Mindstormy

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'); 
    };

来源

2014-01-21 20:20:15

将信息传递给模态

回答

相关问题