How to insert variable into html src?

Question

Hello everybody and happy new year !

I try to insert the parameter $ctrl.configFile.samples into src but I do something wrong and get an error on the console (like iframe src read $ctrl.configFile.samples or something like that):

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
                    })
                }

Artur · Accepted Answer · 2017-12-31 09:41:48Z

1

JS treats $ctrl.configFile.samples as pure string, if you want to get content of that variable you have to write it in this form:

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

With template literals you can access variables like this: `some string... ${variable} ... rest of the string.

2 Comments

Tom Cohen Over a year ago

now it throwing console err :$ctrl is not defined. edited : works ! using this. instead $ctrl.

Artur Over a year ago

@TomCohen You should vote for answer, if you think it's helpful. Thanks!

Jitendar · Accepted Answer · 2017-12-31 12:01:48Z

1

use single quotation like this,

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

answered Dec 31, 2017 at 12:01

Jitendar

4972 gold badges5 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to insert variable into html src?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related