Angular/AngularJS中如何在prompt中插入图片并设置初始值？

Hey there! Let's break down your two questions one by one—since modern Angular (v2+) and AngularJS are distinct frameworks, each has its own approach to solving this.

1. 在Angular（现代版）中实现带图片和初始值的Prompt弹窗 #

First off, the native browser prompt() function only supports plain text, so it can't display images. You'll need to use a custom modal component or a third-party Angular library to build this. Here are two reliable solutions:

方案一：用ng-bootstrap构建自定义Modal #

If you're already using Bootstrap, ng-bootstrap makes it easy to create fully customizable modals. Here's how to add an image and pre-filled input:

First, create a modal component:

// image-prompt-modal.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  template: `
    <div class="modal-header">
      <h4 class="modal-title">Enter Your Response</h4>
      <button type="button" class="btn-close" (click)="activeModal.dismiss('Cross click')"></button>
    </div>
    <div class="modal-body">
      <!-- 插入目标图片 -->
      <img src="/assets/prompt-image.jpg" alt="Prompt Preview" class="mb-3" style="max-width: 200px;">
      <!-- 带初始值的输入框 -->
      <input type="text" class="form-control" [(ngModel)]="userInput">
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="activeModal.close(null)">Cancel</button>
      <button type="button" class="btn btn-primary" (click)="activeModal.close(userInput)">OK</button>
    </div>
  `
})
export class ImagePromptModalComponent implements OnInit {
  @Input() initialValue: string;
  userInput: string;

  constructor(public activeModal: NgbActiveModal) {}

  ngOnInit(): void {
    // 初始化输入框值
    this.userInput = this.initialValue;
  }
}

Then, call this modal from your parent component:

// parent.component.ts
import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ImagePromptModalComponent } from './image-prompt-modal.component';

@Component({
  selector: 'app-parent',
  template: `<button class="btn btn-primary" (click)="openImagePrompt()">Open Prompt with Image</button>`
})
export class ParentComponent {
  constructor(private modalService: NgbModal) {}

  openImagePrompt(): void {
    const modalRef = this.modalService.open(ImagePromptModalComponent);
    // 传递初始值给模态框
    modalRef.componentInstance.initialValue = 'Default text here';

    modalRef.result.then((result) => {
      if (result !== null) {
        console.log('User input:', result);
        // 这里处理用户输入的逻辑
      }
    }, () => {
      console.log('Prompt canceled');
    });
  }
}

方案二：纯自定义弹窗（无第三方库） #

If you don't want to use external libraries, you can build a simple modal with Angular's built-in features. Create a component with an image, input, and toggle its visibility using a boolean flag in your component class.

2. 在AngularJS中用Bootbox实现带图片和初始值的Prompt弹窗 #

Good news: Bootbox.js supports custom HTML content, so you can easily insert images and set initial input values. Let's adjust your existing code to make this work:

$scope.Myfunction = function (i) {
  // 构建包含图片的自定义HTML内容
  const customPromptContent = `
    <div class="mb-3">
      <img src="/path/to/your-image.png" alt="Prompt Image" style="max-width: 150px;">
    </div>
    <!-- 带初始值的输入框 -->
    <input type="text" class="bootbox-input form-control" id="custom-prompt-input" value="Your initial value">
  `;

  bootbox.prompt({
    title: 'Your Prompt Title',
    message: customPromptContent, // 插入带图片的自定义内容
    inputType: 'text',
    callback: function (r) {
      if (r === null) {
        return;
      }
      // 处理用户输入的逻辑
      console.log('User response:', r);
    }
  });

  // 可选：如果初始值未自动生效，手动赋值（解决Bootbox偶尔的渲染延迟）
  setTimeout(() => {
    document.getElementById('custom-prompt-input').value = 'Your initial value';
  }, 10);
};

关键注意点： #

• Bootbox allows custom HTML via the message parameter—this is where you add your <img> tag.
• Ensure your image path is correct (use a relative path from your AngularJS app root or an absolute URL).
• The timeout trick ensures the initial value is set after Bootbox finishes rendering the input field.

内容的提问来源于stack exchange，提问作者micka777