使用以下命令，我无法访问控制器中的值

<div data-controller="static-get-coordinates">
    <div id="sgcmap"
        data-static-get-coordinates-url-value = "<%= url %>"
        data-static-get-coordinates-coords-value = "<%= snippetCoords %>"
        data-static-get-coordinates-center-value = "<%= snippetCenter %>"
        data-static-get-coordinates-xcenter-value = "<%= centerX %>" 
        data-static-get-coordinates-ycenter-value = "<%= centerY %>"
        style="width: 1024px; height: 968px"
        class="mt-1"
    ></div>
    <span>Drawn Coordinates:</span>
    <div id="sgcresult" data-static-get-coordinates-target="drawnCoordinates">
        after drawing a rectangle of course
    </div>
    <div class="fst-italic" data-static-get-coordinates-target="output"></div>
</div> <!-- data-controller div -->

但是如果我把它解嵌套，这样就可以访问值了。

<div data-controller="static-get-coordinates" id="sgcmap"
    data-static-get-coordinates-url-value = "<%= url %>"
    data-static-get-coordinates-coords-value = "<%= snippetCoords %>"
    data-static-get-coordinates-center-value = "<%= snippetCenter %>"
    data-static-get-coordinates-xcenter-value = "<%= centerX %>" 
    data-static-get-coordinates-ycenter-value = "<%= centerY %>"
    style="width: 1024px; height: 968px"
    class="mt-1"
></div>

我看过嵌套的例子，但它是针对目标的，而不是值。有没有办法解决这个问题？如果我像第二个一样创建两个，url引用的图像会显示两次。（在这个例子中，一些变量（值）没有被使用，但它们在我的应用程序中，这是一个简化的页面来解决问题。这个例子是可用的here。目前它有硬编码的“值”，但是可以绘制矩形，并且坐标出现在页面上。矩形不会像它应该的那样停留在页面上。

// app/javascript/controllers/static_get_coordinates.js
import { Controller } from "@hotwired/stimulus"

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {getCenter} from 'ol/extent';
import Projection from 'ol/proj/Projection';
import Static from 'ol/source/ImageStatic';
import ImageLayer from 'ol/layer/Image';
import Draw, {createBox} from 'ol/interaction/Draw.js';
import {Vector as VectorSource} from 'ol/source.js';
import {Tile as TileLayer} from 'ol/layer.js';

export default class extends Controller {
  static targets = [ "drawnCoordinates" ]

  static values = {
    url: String,
    coords: Array,
    xcenter: Number,
    ycenter: Number,
    center: Array,
  }
  connect(){
    // var xkcdUrl = this.urlValue;
    // const center = this.centerValue;
   //  var xCenter = this.xcenterValue;
    const source = new VectorSource({wrapX: false});
 
    const extent = [0, 0, 1024, 968];
    const projection = new Projection({
      code: 'xkcd-image',
      units: 'pixels',
      extent: extent,
    });
 
    const xkcdLayer = new ImageLayer({
       source: new Static({
         attributions: '© <a href="https://xkcd.com/license.html">xkcd</a>',
         url: 'https://imgs.xkcd.com/comics/online_communities.png',
         // url: xkcdUrl,
         projection: projection,
         imageExtent: extent,
       }),
     });
    var map = new Map({
      layers: [
         xkcdLayer
      ],
      target: 'sgcmap',
      view: new View({
        projection: projection,
        center: getCenter(extent),
        zoom: 2,
        maxZoom: 8,
      }),
    });
    function addDrawInteraction(coordsOutputTarget) {
      let draw = new Draw({
         source: source,
         type: 'Circle', // I think the circle is the cursor
         geometryFunction: createBox(), // this makes the drawn object a rectangle
       });
       map.addInteraction(draw);
   
       draw.on('drawend', function(event) {
         let boxCoords = event.feature.values_.geometry.flatCoordinates; 
         const boxCoordsTrunc = boxCoords.map(x => Math.trunc(x)) // For readabililty truncating the 13 meaningless digits after the decimal place. 
         coordsOutputTarget.textContent = `${boxCoordsTrunc}`;
      }); 
     } 
      addDrawInteraction(this.drawnCoordinatesTarget); // sending target for coordinates and activating the ability to draw a rectangle and get its coordinate
  }
}