使用Angular JS在弹出窗口中显示图像

Question

使用Angular JS在弹出窗口中显示图像

javascripthtmlangularjs

3

这是我在StackOverflow上的第一篇文章，我正在学习Angular，所以我是一个初学者，目前有些困惑。

我正在使用Angular创建一个网页，其中一个页面包含一个按钮和一个弹出窗口。我想在弹出窗口中放置一张图片，但我很难让它正常工作。

步骤和名称属性已成功显示在弹出窗口中，但图片无法正常显示。我尝试将URL仅显示为字符串，但也不起作用。

我还尝试使id属性（仅为字符串）出现，但也不起作用。

我在html中只使用了一组大括号将ctrl.figure包含起来，因为这至少能让我在弹出窗口中获得一个损坏的图片图标，而如果我像通常建议的那样使用两个大括号，我什么都看不到。

我在本地计算机上托管网站，并使用Chrome开发工具，一直收到文件未找到的消息。我已经多次检查了文件路径，似乎没有问题。由于我无法将figure的URL仅显示为字符串，所以我认为问题可能与控制器有关。

非常感谢您的建议。第一组代码是弹出窗口的html，第二个代码片段来自控制器。

<!--Overlay div for popup window-->
    <div ng-show= "ictrl.showValue" class="instAbsolute col-xs-12 col-md-10 ng-cloak">
        <span class= "glyphicon glyphicon-remove pull-right" ng-click = "ictrl.hideDetails()"></span>
        <h4 class = "text-muted" >{{ictrl.step}}</h4>
        <h1 class = "text-grey">{{ictrl.name}}</h1>
        <h1 class = "text-grey">{{ictrl.id}}</h1>
        <div ng-bind-html="ictrl.description">
        </div>
          <img class= "img-responsive" ng-src="{ictrl.figure}" alt="{{ictrl.alt}}">
    </div> 
   </div> <!--end of controller -->
</div> <!--end of app -->

angular.module('instructionsApp', ['ngSanitize']).controller('instructionsCtrl',[

    function() {
        var self = this;
        self.showValue = false;
        self.showDetails = function(id) {
            for (var i = 0; i < this.steps.length; i++) {
                if (self.steps[i].id === id) {
                    self.name = self.steps[i].name;
                    self.step = self.steps[i].step;
                    self.description = self.steps[i].description;
                    self.showValue = true;
                }
            }
        };
        self.hideDetails = function() {
            self.showValue = false;
        };
        self.steps = [{
        {
            name: "Attach Camera",
            id: "S1",
            step: "Setup",
            description: "<p>There are many ways to attach you camera to your laptop.&nbsp; For digital camera output, we recommend connecting the camera with a wire to the faster firewire port &ndash; but the USB port will also work.&nbsp; As an example, for analog camera output you can use an external capture device (such as the Dazzle from Pinnacle) with a 3-port composite connector into the camera and a USB connection on the other end of the cable into the laptop.&nbsp; Also, there are many ways to interface a camera to an internal video capture card.&nbsp; See illustrations below:<\/p>"
        }, {
            name: "Launch VazztCaster",
            id: "S2",
            step: "Setup",
            figure: "../img/instructionsImages/launchVazztCaster.jpg",
            description: "<p>Launch the VazztCaster.exe program on your laptop by clicking on the Vazzt icon (red V) on your desktop. &nbsp;After launch, on the home page of VazztCaster click on the Login Icon (person) and enter the Credentials:<\/p><p>Next Click on the Video Settings Icon (blue camcorder)&nbsp; and enter your choice of&nbsp;<\/p><p>&nbsp;<\/p><p>Note that the VazztCaster will automatically set default values, if possible, in the Video Settings fields based on the camera attached, the IP networks it finds, and the audio equipment attached:<\/p><ul><li>Video Capture Devices<\/li><li>Video Resolution<\/li><li>Video Bandwidth<\/li><li>Aspect Ratio<\/li><li>Audio Capture Device<\/li><li>And other Audio parameters.&nbsp;<\/li><\/ul><p>However, you can manually override these.&nbsp; Click the OK button when you are finished.<\/p><p>Most cameras will automatically provide notification of the various resolutions that the camera can support.&nbsp; VazztCaster can detect this and by examining the bandwidth detected, also automatically, VazztCaster sets default resolution and bandwidth.<\/p><p>&nbsp;<\/p><p>&nbsp;<\/p>",
            alt: "Launch VazztCaster",
            imageCaption: "After launching VazztCaster, this is what your screen should look like."
        }];
    }
]);

- Kelsey Steele

2

你尝试在弹出窗口中打印 {{ictrl.figure}} 来检查路径/值是否正确了吗？与使用 ng-src 相比呢？ - ltalhouarne

2

也可以直接在代码中写入图片路径，并确保它在不使用Angular的情况下正常工作。 - Neil

1

查看您的数据 self.steps ... 您没有名为 url 的属性 ... 请告诉我们这些数据是在哪里填充的（或解释一下）。此外，您的 JavaScript 声明了一个名为 instructionsCtrl 的控制器，但在 HTML 中使用的是 ictrl。您的问题实际上无法回答。 - Sunil D.

我尝试将{{ctrl.figure}}作为字符串打印在弹出窗口上，但没有成功。我使用硬编码的图像src而不是angular，并且它可以工作，所以我相当确定这是正确的路径。图像的url位于名为figure的属性下。我在周围的div中使用了ng-controller="instructionsCtrl as ictrl"。这是GitHub上HTML文档的链接：github.com/KelseySteele/video-on-the-move-website/blob/master/… 这是JS文档的链接：github.com/KelseySteele/video-on-the-move-website/blob/master/… 谢谢！ - Kelsey Steele

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gandharv garg · Answer 1

在你的 instructionController.js 文件中 -

self.showDetails = function(id) {
    for (var i = 0; i < this.steps.length; i++) {
        if (self.steps[i].id === id) {
            self.name = self.steps[i].name;
            self.step = self.steps[i].step;
            self.description = self.steps[i].description;



    ## self.figure = self.steps[i].figure;
    ## self.alt = self.alt[i].alt;
    ## self.imageCaption = self.imageCaption[i].imageCaption

            self.showValue = true;
        }
    }
};

以##开头的行是您需要添加的行，所以基本上您忘记了循环上面突出显示的行。

希望这可以帮助您。