使用Angular JS获取图像以显示在弹出窗口中 [英] Getting an image to appear on a popup window with Angular JS
问题描述
这是我在StackOverflow上的第一篇文章，我自学Angular，所以我是一个初学者，目前感到困惑。
我正在创建一个带有Angular的网页，另外一个的页面涉及一个按钮和一个弹出窗口。我想将图像放入弹出窗口中，但是我在解决此问题方面遇到了很多麻烦。步骤和名称属性成功显示在弹出窗口中，但图像不起作用。我试图让网址显示为一个字符串，但这也行不通。
我也试过让id属性（这只是一个字符串）出现，但那也行不通。
我只在html的ctrl.figure周围放置了一组花括号，因为这至少让我在弹出窗口中看到一个破碎的图片图标，而如果我使用通常建议的两个大括号，我什么也得不到。
我在本地计算机和Chrome浏览器开发工具上托管网站，不断收到消息，指出找不到该文件。我检查过多次文件路径，看起来很好。由于我无法将图形的网址显示为字符串，因此我认为问题可能与控制器有关。
任何建议将不胜感激。第一组代码是弹出窗口的html，第二组代码来自控制器。
<！ - 弹出窗口覆盖div - >
< div ng-show =ictrl.showValueclass =instAbsolute col-xs-12 col-md-10 ng-cloak>
< span class =glyphicon glyphicon-remove pull-rightng-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>
< / div>
< / div> <！ - 控制器结束 - >
< / div> <！ - 应用程序结束 - >
angular.module（' instructionsApp'，['ngSanitize']）.control（'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 ：设置，
描述： < p>将相机连接到笔记本电脑的方法有很多。& nbsp;对于数码相机输出，我们建议将相机连接到更快的火线端口和ndash;但USB端口也可以工作。& nbsp;例如，对于模拟摄像头输出，您可以使用带有3端口复合连接器的外部捕捉设备（例如Pinnacle的Dazzle），将电缆另一端的USB连接插入笔记本电脑。& NBSP;此外，将摄像头连接到内部视频采集卡的方法也很多。& nbsp;请参阅以下插图：< \ / p>
}，{
名称：Launch VazztCaster，
id：S2，
step：Setup
figure：../img/instructionsImages/launchVazztCaster.jpg，
description：< p>点击Vazzt图标（红色V），在笔记本电脑上启动VazztCaster.exe程序你的桌面。 启动后，在VazztCaster的主页上点击登录图标（person）并输入凭证：< \ / p>< p>下一步点击视频设置图标（蓝色摄像机）& NBSP;并输入您选择的 < \ / p>< p>& nbsp;< \ / p>< p>请注意，如果可能，VazztCaster会自动设置默认值基于附加相机的设置字段，找到的IP网络以及附加的音频设备：< \ / p>< ul>< li>视频捕获设备< \ / li>< li>视频分辨率< ;< />< li>< li>< li>< li>< li>< li><参数。& nbsp;< \ / li>< \ / ul>< p>然而，您可以手动覆盖这些。& nbsp; < \ / p>< p>大多数相机会自动提供相机可以支持的各种分辨率的通知。& nbsp; < p>< p> < p>< p>< p>& nbsp ;< \ / p>，
alt：启动VazztCaster，
imageCaption：启动VazztCaster后，这就是您的屏幕应该看起来像。
}];
}
]）;
欢迎来到Angularjs的学习..
现在转到答案..你的JSON有一堆错误..
我已经修复它们，只需将它复制粘贴到 self .steps
[
{
name：Attach Camera ，
id：S1，
step：Setup，
description：< p>将相机连接到笔记本电脑的方法很多&安培; NBSP;对于数码相机输出，我们建议将相机连接到更快的火线端口和ndash;但USB端口也可以工作。& nbsp;例如，对于模拟摄像头输出，您可以使用带有3端口复合连接器的外部捕捉设备（例如Pinnacle的Dazzle），将电缆另一端的USB连接插入笔记本电脑。& NBSP;此外，将摄像头连接到内部视频采集卡的方法也很多。& nbsp;请参阅以下插图：< \ / p>
，{
name：Launch VazztCaster，
id：S2，
step ：Setup，
figure：../img/instructionsImages/launchVazztCaster.jpg，
description：< p>在笔记本电脑上启动VazztCaster.exe程序点击桌面上的Vazzt图标（红色V）。 启动后，在VazztCaster的主页上点击登录图标（person）并输入凭证：< \ / p>< p>下一步点击视频设置图标（蓝色摄像机）& NBSP;并输入您选择的 < \ / p>< p>& nbsp;< \ / p>< p>请注意，如果可能，VazztCaster会自动设置默认值基于附加相机的设置字段，找到的IP网络以及附加的音频设备：< \ / p>< ul>< li>视频捕获设备< \ / li>< li>视频分辨率< ;< />< li>< li>< li>< li>< li>< li><参数。& nbsp;< \ / li>< \ / ul>< p>然而，您可以手动覆盖这些。& nbsp; < \ / p>< p>大多数相机会自动提供相机可以支持的各种分辨率的通知。& nbsp; < p>< p> < p>< p>< p>& nbsp ;< \ / p>，
alt：启动VazztCaster，
imageCaption：启动VazztCaster后，这就是您的屏幕应该看起来像。
}]
另请注意，您已将控制器声明为 instructionsCtrl ，并且在视图中使用 ictrl 。另外不要忘记提及 ng-controller =instructionsCtrl在你的html中
编辑[如果你还没有弄清楚]
在你的instructionController.js中 - / p>
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;
}
}
};
以 ## 开头的行是您需要添加的行基本上你忘了循环上面突出显示的行。
希望这有助于。
This is my first post on StackOverflow and I am teaching myself Angular, so I am a beginner and currently confused.
I am creating a webpage with Angular and one of the pages involve a button and a popup window. I would like to put an image into the popup window, but I am having a lot of trouble with getting this to work.
The step and name properties are successfully appearing in the popup window, but the image is not working. I have tried just getting the url to appear as a string, but that also doesn't work.
I've also tried getting the id property (which is just a string) to appear, but that also doesn't work.
I put only one set of curly brackets around the ctrl.figure in the html because that at least gets me a broken picture icon in the popup window, whereas if I use two curly brackets, as is normally suggested, I get nothing.
I am hosting the website on my local computer and with Chrome Dev tools, keep getting a message that the file is not found. I've checked the file path multiple times and it seems fine. Since I can't get the figure's url to appear as just a string, I'm thinking that the problem might have something to do with the controller.
Any suggestions would be greatly appreciated. The first set of code is the html for the popup window and the second bit is from the controller.
<!--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. For digital camera output, we recommend connecting the camera with a wire to the faster firewire port – but the USB port will also work. 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. Also, there are many ways to interface a camera to an internal video capture card. 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. 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) and enter your choice of <\/p><p> <\/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. <\/li><\/ul><p>However, you can manually override these. 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. VazztCaster can detect this and by examining the bandwidth detected, also automatically, VazztCaster sets default resolution and bandwidth.<\/p><p> <\/p><p> <\/p>",
alt: "Launch VazztCaster",
imageCaption: "After launching VazztCaster, this is what your screen should look like."
}];
}
]);
welcome to the learning Angularjs ..
now moving on to the answer .. your JSON has a bunch of errors ..
I have fixed them for you just copy paste it in self.steps
[
{
"name": "Attach Camera",
"id": "S1",
"step": "Setup",
"description": "<p>There are many ways to attach you camera to your laptop. For digital camera output, we recommend connecting the camera with a wire to the faster firewire port – but the USB port will also work. 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. Also, there are many ways to interface a camera to an internal video capture card. 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. 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) and enter your choice of <\/p><p> <\/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. <\/li><\/ul><p>However, you can manually override these. 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. VazztCaster can detect this and by examining the bandwidth detected, also automatically, VazztCaster sets default resolution and bandwidth.<\/p><p> <\/p><p> <\/p>",
"alt": "Launch VazztCaster",
"imageCaption": "After launching VazztCaster, this is what your screen should look like."
}]
Also please note that you have declared your controller as instructionsCtrl and you are using ictrl in the view. Also do not forget to mention ng-controller = "instructionsCtrl" in your html
EDIT [If you have not figured it out yet] In your 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;
}
}
};
The lines starting with ## are the ones you need to add So basically you forgot to loop the above highlighted lines. Hope this helps.
这篇关于使用Angular JS获取图像以显示在弹出窗口中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
