图像不使用 angularJS 以模态显示答案

【问题标题】：Image does not display in modal using angularJS图像不使用 angularJS 以模态显示
【发布时间】：2016-06-22 04:05:11
【问题描述】：

我的js文件：

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

我的html文件：

 <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>

我试图使用 bootstrap ui 在模态表单上显示我的图像，但不知道为什么图像不会显示在模态表单上。任何人都可以帮我解决这个问题吗？我的图像存储在 Web 服务器文件夹中并从那里检索它。

【问题讨论】：

您的模态不应使用打开模态的同一个控制器。我很惊讶这并没有导致模态的无限循环
你的 HTML 也是一团糟。您的模板不应有 <html> 标签或 ng-app 指令。您的第一个 <html 标签也丢失了 >
我试过了，还是不显示图片。 @菲尔

标签： javascript angularjs angular-ui-bootstrap

【解决方案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

【讨论】：