將信息傳遞給模態

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

將信息傳遞給模態

回答

相關問題