Use variable with site address in HTML - Angular

Question

Use variable with site address in HTML - Angular

Navigation

#1 by (2 votes)

2

Hello, I'm developing an angular site, but I'm having a hard time using the baseurl variable, which contains the base path of the site, in some things like links I can use, but inside a background-image or an ng-click , for example, it does not work.

How do you have to be able to use the variable for these purposes?

I'm creating this variable in my Constants.js and calling it in my controller.js as follows:

.controller('mainController', function ($scope, API, $location) {
            $scope.baseurl = API.url;
            $scope.$on('$routeChangeStart', function (next, current) {
                $scope.url_atual = $location.url();
            });
        });

Constants.js is as follows:

(function() {
'use strict';

angular
    .module('app')
    .constant('API', {
        url: 'http://192.168.110.4/cliente_cliente/em_desenvolvimento/front/bernardo/'
    }); })();

One place that works is the links:

<a href="{{baseurl}}#/noticias/interna/#disqus">

One place that does not work is:

<img class="img-responsive" alt="disqus" src="{{baseurl}}app/template/img/icone_face_home.png">

I'd also like to put inside script tags, like low, but I'm not getting it:

var image = {{baseurl}}app/template/img/icone_mapa.png";

And within a css field:

<div class="img_principal_noticia_home" style="background-image: url({{baseurl}}app/template/img/img_baner.jpg)"></div>

And within a ng-click, I also could not (rrsrsrsrs):

<a href="" ng-click="vm.facebook('{{baseurl}}#/noticias/interna')">

html angularjs

asked by anonymous 23.03.2016 / 20:07

1 answer

How to restrict the values of a date in a field of a form in java? How to find the base url of Laravel?

score 2 · Accepted Answer

The problem of using the following definition in an image:

<img src="{{meuValor}}" />

Is that HTML will render before Angular can apply the correct value of meuValor and insert the corresponding url, that is, the html will search with an image that has the path {{meuValor}} and not the value itself said of scope $scope.meuValor .

To resolve this problem, the ngSrc directive has been created, more information here , which that the rendering of the image occurs only after the Angular has received and passed the value to the view .

It should be used like this:

<img ng-src="{{meuValor}} />

As for other cases, I do not see why they did not work the way you configured them. Maybe it's some other factor that's interfering.