Get data from directive and change image according to data value

Question

I want to get the value of current.flag from my template property in random.js file and use it after in my HTML file. According to the value of flag I will receive, I would like an image to be changed. I would like some help for that, because I'm beginner to Angular. Thanks in advance

<section class="has-header">
  <div class="container">
    <div class="row">
      <div class="col-md-4 text-center">
          <img ng-src="{{current.flag === 'gr' ? 'images/image_1.png' : 'images/image_2.png'}}" />
      </div>
    </div>
  </div>
</section>

random.js

angular.module('app')
.directive('language', function () {
    return {
        restrict: 'E',
        replace: true,
        scope: {},
        template: '<div class="languages-wrap pull-right">\
    <div class="languages f32">\
        <div ng-click="poped=!poped" class="current flag {{current.flag}}"></div></div>\
    <div class="language-selector" ng-show="poped">\
        <ul class="languages-list">\
            <li ng-repeat="l in langs">\
                <a ng-click="changeLang(l)" class="languages f32">\
                    <div class="flag {{l.flag}}"></div>\
                </a>\
            </li>\
        </ul>\
    </div>\
    </div>',
        controller: ['$scope', '$cookies', '$translate', '$route', '$location',
            function ($scope, $cookies, $translate, $route, $location) {
                $scope.poped = false;
                $scope.langs = [
                    {
                        iso: 'el',
                        flag: 'gr'
                    },
                    {
                        iso: 'en',
                        flag: 'us'
                    }
                ];

                $scope.current = $cookies.getObject('lang') ? $cookies.getObject('lang') : $scope.langs[0];

                $scope.changeLang = function (lang) {
                    $cookies.putObject('lang', lang, {expires: new Date(2020, 10, 10)});
                    $translate.use(lang.iso);
                    $scope.current = lang;
                    $scope.poped = false;
                    $location.search('lang', lang.iso);
                    $route.reload();
                };
            }
        ]
    };
});

score 0 · Answer 1 · edited Apr 06 '19 at 20:06

0

u can do a controller to the html file and add

$scope.current = $cookies.getObject('lang') ? $cookies.getObject('lang') : $scope.langs[0];

to the controller

if i understand correctly , u want to use the $scope.current value from a directive in another html file, which is not connected to the directive , if yes , what u can do is add a controller to this html and add the

$scope.current = $cookies.getObject('lang') ? $cookies.getObject('lang') : $scope.langs[0];

to it How to bind an AngularJS controller to dynamically added HTML?

make controller file
add it to index.html,
add this inside it

var app = angular.module('myApp', []);
app.controller('exampleCtrl', function($scope, $cookies) {
    $scope.current = $cookies.getObject('lang') ? $cookies.getObject('lang') : $scope.langs[0];
});

in the html add controller to the section tag

<section class="has-header" ng-controller="exampleCtrl">

edited Apr 06 '19 at 20:06

georgeawg

48,608
13
72
95

answered Apr 06 '19 at 10:51

wael abolhija

32
5

Some further instructions would be much appreciated! Thanks! – diamond Apr 06 '19 at 10:54
if i understand correctly , u want to use the $scope.current value from a directive in another html file, which is not connected to the directive , if yes , what u can do is add a controller to this html and add the $scope.current = $cookies.getObject('lang') ? $cookies.getObject('lang') : $scope.langs[0]; to it https://stackoverflow.com/questions/20651578/how-to-bind-an-angularjs-controller-to-dynamically-added-html – wael abolhija Apr 06 '19 at 11:01
Could you please just provide me the steps with code example? – diamond Apr 06 '19 at 11:07
1- make controller file 2- add it to index.html, 3- add this inside it var app = angular.module('myApp', []); app.controller('exampleCtrl', function($scope, $cookies) { $scope.current = $cookies.getObject('lang') ? $cookies.getObject('lang') : $scope.langs[0]; }); 4- in the html add controller to the section tag
– wael abolhija Apr 06 '19 at 11:16
Okay.. Sorry for the incovenience, but could you open a code pen session and paste the code there? Really need it cause I'm stuck!! – diamond Apr 06 '19 at 11:55

Get data from directive and change image according to data value

1 Answers1