Use variable with site address in HTML - Angular

Asked

Viewed 930 times

2

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

How it has to be done to be able to use the variable for these ends?

I’m creating this variable in my Constants.js and calling her 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/'
    }); })();

A place that works is in the links:

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

A place that doesn’t work is:

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

I would also like to put inside script tags, as low, but I’m not getting:

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 inside an ng-click, I couldn’t (rrsrsrsrs):

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

  • How’s your Constant.JS file?

  • my constants look like this: (Function() { 'use Strict'; angular .module('app') .Constant('API', { url: 'http://192.168.110.4/cliente_client/em_development/front/' }); })(); From what I know, this variable is global.

  • If you can use in some areas but not in others, the relative path is what the problem should be. How is it being defined in your html? Put examples of where the problem happens.

  • Hello, Celsomtrindade, I added working examples to the question

  • @Bernardokowacic try to use it as follows ng-src="{{baseurl}}app/....

  • Hello @Celsomtrindade, I was able to use this way to update images that are in the <img> tags. Another question, how can I use this same variable in a background-image and within script tags on the page (google maps api)? I will post on the question, if you can answer thank you

  • Look. I can’t see why your code doesn’t work. If you inspect the element through the Chrome console, for example, when using the Dimage backgroun, how is the style link? And if you open it, is it with a valid path and valid img? In ng-click, when you click, what happens? you get some error console stating that the problem is actually the url?

  • Hello, I can use them using the direct link, but I can not the way I posted.

  • @Celsomtrindade, post your comment that you told me to use ng-src (comment 6) to mark it as correct. I was able to solve the problem I talked about today by simply removing the baseurl and it worked the same. Thanks for helping :D

Show 5 more comments

1 answer

2


The problem of using the following definition in an image:

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

It 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 actual value of Scope $scope.meuValor.

To solve this problem the directive was created ngSrc, more information here, which causes image rendering to occur only after Angular has received and passed the value to the view.

It should be used like this:

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

As for the other cases, I don’t see why they don’t work the way you set them up. Maybe it’s some other factor that’s interfering.

  • Complementing the answer, in case someone else has this problem, in the script and in the css field I solved just taking out the baseurl, and putting the path from the html file location

  • This happens because of course the path starts from the root. =)

  • the old problem and the damn annoyance of the Angular JS is basically this. KKKK (the order of tractors...)

Browser other questions tagged

You are not signed in. Login or sign up in order to post.