Image does not display in modal using angularJS

问题

My js file:

var camListApp = angular.module('camListApp', ['ui.bootstrap', 'angularUtils.directives.dirPagination'])

 camListApp.filter('unique', function() {
    return function(input, key) {
        var unique = {};
        var uniqueList = [];
        for(var i = 0; i < input.length; i++){
            if(typeof unique[input[i][key]] == "undefined"){
                unique[input[i][key]] = "";
                uniqueList.push(input[i]);
            }
        }
        return uniqueList;
    };
 });


 camListApp.controller("Hello", function($scope, $http, $uibModal){ 

        $scope.open = function (url){
        $scope.imageView = url;

        var modalInstance = $uibModal.open({
        templateUrl: 'popup.html',
        controller: 'ModalInstanceCtrl',
        resolve: {
            records : function () {
              return  $scope.imageView;
            }
        }
        });
        }
           $http.get('http://localhost:8081/camera/list').then(function(response) {
         console.log(response);
        $scope.records= response.data; 
          });


});

angular.module('camListApp').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, records) {

      $scope.records = records;


      $scope.ok = function () {
        $uibModalInstance.close($scope.selected.item);
      };

      $scope.cancel = function () {
        $uibModalInstance.dismiss('cancel');
      };
    });

My html file:

 <html ng-app"camListApp">
 <div ng-controller="Hello">

 <table border = 1>
    <thead>
      <tr>

        <th>CamID</th>
        <th>Timestamp</th>
        <th>Image</th>
        <th>View image</th>
      </tr>
    </thead>

    <tbody>
      <tr dir-paginate="record in records | itemsPerPage:5 | filter:searchBox | orderBy:'+timestamp'">

        <td>{{record.cameraid}}</td>
        <td>{{record.timestamp}}</td>

        <td><img ng-src="http://localhost:9100/Images/{{record.filename}}.png" width="40" height="50"></td>
        <td><button class="btn btn-primary" ng-click="open(record.filename)">View</button></td>

      </tr>


    </tbody>
  </table>

  </div>

 <script type="text/ng-template" id="popup.html">
    <div class="modal-header">
        <h3 class="modal-title">Image View</h3>
    </div>
    <div class="modal-body">
   <img ng-src="http://localhost:9100/Images/{{imageView}}.png" width="40" height="50"></div>
 <div class="modal-footer">
        <button class="btn btn-warning" onclick="location.href='http://localhost:8082/';">Cancel</button>
    </div>
 </script>

I was trying to display my images on the modal form using bootstrap ui but don't know why the images does not display on the modal. Anybody can help me solve this? My images are store in a web server folder and retrieve it from there.

回答1:

index.html
----------
<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="https://code.angularjs.org/1.2.18/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="ModalDemoCtrl">

    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3>I'm a modal!</h3>
        </div>
        <form ng-submit="submit()">
          <div class="modal-body">
            <img ng-repeat="img in imgs" ng-src="{{img}}"/> {{img}}
          </div>
          <div class="modal-footer">
              <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
              <input type="submit" class="btn primary-btn" value="Submit" />
          </div>
        </form>
    </script>

    <button class="btn" ng-click="open()">Open me!</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
  </body>
</html>

example.js
---------
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log,$sce) {


    $scope.open = function () {
        var parentScope = $scope;

        $scope.imgs =[];
        $scope.imgs.push($sce.trustAsUrl("http://dummyimage.com/64X64/000/f00"));
        $scope.imgs.push($sce.trustAsUrl("http://dummyimage.com/64X64/000/0f0"));
        $scope.imgs.push($sce.trustAsUrl("http://dummyimage.com/64X64/000/00f"));

        $modal.open({
            templateUrl: 'myModalContent.html',
            backdrop: true,
            windowClass: 'modal',
            controller: function ($scope, $modalInstance) {
                $scope.imgs = parentScope.imgs;
                $scope.cancel = function () {
                    $modalInstance.dismiss('cancel');
                };
            }
        });
    };
};

Demo

来源：https://stackoverflow.com/questions/37958359/image-does-not-display-in-modal-using-angularjs

标签

javascript

angularjs

angular-ui-bootstrap