图像不使用 angularJS 以模态显示 [英] Image does not display in modal using angularJS

查看：15
本文介绍了图像不使用 angularJS 以模态显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的js文件:

var camListApp = angular.module('camListApp', ['ui.bootstrap', 'angularUtils.directives.dirPagination'])camListApp.filter('unique', function() {返回函数(输入，键){var 唯一 = {};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]);}}返回唯一列表；};});camListApp.controller("Hello", function($scope, $http, $uibModal){$scope.open = 函数(网址){$scope.imageView = url;var modalInstance = $uibModal.open({templateUrl: 'popup.html',控制器:'ModalInstanceCtrl'，解决: {记录:函数(){返回 $scope.imageView;}}});}$http.get('http://localhost:8081/camera/list').then(function(response) {控制台日志(响应)；$scope.records= response.data;});});angular.module('camListApp').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, records) {$scope.records = 记录；$scope.ok = 函数 () {$uibModalInstance.close($scope.selected.item);};$scope.cancel = 函数 () {$uibModalInstance.dismiss('cancel');};});

我的 html 文件:

 <div ng-controller="你好"><表格边框=1><头><tr><th>CamID</th><th>时间戳</th><th>图像</th><th>查看图像</th></tr></thead><tr dir-paginate="记录记录 | 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)">查看</button></td></tr></tbody>

<script type="text/ng-template" id="popup.html"><div class="modal-header"><h3 class="modal-title">图像视图</h3>

<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/';">取消</button>

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

解决方案 

index.html----------<!doctype html><html ng-app="plunker"><头><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"><身体><div ng-controller="ModalDemoCtrl"><script type="text/ng-template" id="myModalContent.html"><div class="modal-header"><h3>我是一个模态！</h3>

<form ng-submit="submit()"><div class="modal-body"><img ng-repeat="img 中的img" ng-src="{{img}}"/>{{图片}}

<div class="modal-footer"><button class="btn btn-warning" ng-click="cancel()">取消</button><input type="submit" class="btn primary-btn" value="Submit"/>

</表单><button class="btn" ng-click="open()">打开我！</button><div ng-show="selected">从模态中选择:{{ selected }}</div>

</html>例子.js---------angular.module('plunker', ['ui.bootstrap']);var ModalDemoCtrl = function ($scope, $modal, $log,$sce) {$scope.open = 函数 () {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',背景:真实，窗口类:'模态'，控制器:函数($scope，$modalInstance){$scope.imgs = parentScope.imgs;$scope.cancel = 函数 () {$modalInstance.dismiss('cancel');};}});};};

演示

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.

解决方案 

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

这篇关于图像不使用 angularJS 以模态显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆