如何将变量插入到html src中？

Question

大家好，祝新年快乐！

我尝试将参数$ctrl.configFile.samples插入src但我做错了并在控制台上出错（比如iframe src读取$ctrl.configFile.samples或类似的东西）：

Failed to load resource: net::ERR_FILE_NOT_FOUND

function _downloadSamples() {
                    var filePath = path.join(__dirname,'/../','/../config.json');
                    this.configFile = JSON.parse(fs.readFileSync(filePath, 'utf8'));
                    $mdDialog.show({
                        controller: sideActionsController,
                        controllerAs: '$ctrl',
                        template:
                        `
                        <md-toolbar class="root-container">   
<iframe width="1280" height="720" src="$ctrl.configFile.samples" frameborder="0" scrolling="yes"></iframe>
                       `,
                        bindToController: true,
                        clickOutsideToClose: true,
                        fullscreen: true,
                        parent: $rootScope.parentEl
                    })
                }

Answer 1

JS将$ ctrl.configFile.samples视为纯字符串，如果要获取该变量的内容，则必须以此形式编写它：

src="${ $ctrl.configFile.samples }"

使用模板文字，您可以访问如下变量：`some string ... $ {variable} ...字符串的其余部分。

了解更多关于template literals的信息。

Answer 2

像这样使用单引号，

'<md-toolbar class="root-container">
<iframe width="1280" height="720" src=" ' + $ctrl.configFile.samples + '" frameborder="0" scrolling="yes"></iframe> '