Получить данные из директивы и изменить изображение в соответствии со значением данных

Question

Я хочу получить значение current.flag из моего свойства шаблона в файле random.js и использовать его после в моем HTML-файле. В зависимости от значения флага, который я получу, я бы хотел, чтобы изображение было изменено. Я хотел бы помочь с этим, потому что я новичок в Angular. Заранее спасибо

<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();
                };
            }
        ]
    };
});

Answer 1

вы можете сделать контроллер для HTML-файла и добавить

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

к контроллеру

---

, если я правильно понимаю, вы хотите использовать значение $scope.current издиректива в другом html-файле, который не связан с директивой, если да, то, что вы можете сделать, это добавить контроллер в этот html и добавить

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

к нему Как связатьКонтроллер AngularJS для динамически добавляемого HTML?

---

1. сделать файл контроллера
2. добавить его в index.html,
3. добавить это внутри него

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

в html добавить контроллер в тег раздела

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