AngularJS использует компонент в качестве заполнителя тега ввода

У меня есть компонент локализации, который выглядит так:

(function() {
  'use strict';

  angular
    .module('app.core')
    .component('i18n', {
      templateUrl: './i18n.html',
      bindings: {
        code: '@'
      },
      controller: i18n,
      controllerAs: 'vm'
    });


  i18n.$inject = ['langStrings'];

  function i18n(langStrings) {
    const vm = this;
    this.$onInit = () => {
      vm.text = langStrings.get(vm.code);
    };
  }
})();

Шаблон i18n состоит из одной строки:

{{vm.text}}

Это отлично подходит для отображения строк, но когда я хочу использовать строку в другом компоненте или в шаблоне в качестве заполнителя для тега ввода, я не знаю, как ее применить. Так, например, как мне применить конечный результат компонентов для заполнителя входных данных в другом контексте?

Вход в какой-либо другой компонент или шаблон.

<input 
    placeholder = "<i18n code='searchPlaceholder'/>"
>

Я использую angularJs 1.7.2

Разве это не помогает? placeholder = "{{vm.text}}"

— 28.10.2018 08:05

Извините, я дал нечеткие инструкции. Выяснил вопрос.

— 28.10.2018 09:55

javascript angularjs angularjs-directive angularjs-components

28.10.2018 06:36

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

387

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Атрибут-заполнитель ввода ожидает строку. <i18n> - это компонент, отображающий HTML-элемент, как и его имя (ограничение в директивах, поскольку компонент Элемент действительно действует).

Angular может поддерживать интерполяция для атрибута. так что в основном вам нужно создать что-то вроде placeholder = "{{exp}}", в котором оценка exp должна будет возвращать строку.

Либо вы создаете компонент, отображающий ввод как HTML
Используйте метод {{langStrings.get(v)}} и преобразуйте его в переменную, поэтому используйте placeholder = "{{vm.text}}" или ng-init = "z= lngs('asdf');" placeholder = "{{z}}".
Получите доступ к элементу и измените его атрибут, что можно сделать с помощью функции ссылка или функции шаблона компонента.
Или, по сути, вы создаете что-то, что приводит к преобразованию строки, а не отображает ее HTML. Пример специальной службы 4 с использованием i18n.

попробуйте более простой способ изменить атрибут элементов в директиве с помощью функции ссылки

(function() {
  'use strict';

  function i18n(langStrings) {
    return {
      restrict: 'CA',
      scope: {
        code: '@'
      },
      link: function(scope, elem, attrs) {

        //attrs.$set('placeholder', langStrings.get(scope.code));
        // observe changes to interpolated attribute
        attrs.$observe('code', function(value) {
          let text = langStrings.get(value);
          elem.attr('placeholder', text);
        });
        //https://stackoverflow.com/questions/14876112/angularjs-difference-between-the-observe-and-watch-methods
        //scope.$watch('code', function(newval) {
        //let text = langStrings.get(newval);
        //elem.attr('placeholder', text);
        //});
      },
    }
  }

  function testCtrl($scope, langStrings) {
    $scope.lngs = function(v) {
      return langStrings.get(v);
    };
    return this;
  }

  angular
    .module('app', [])
    .component('i18c', {
      bindings: {
        code: '@'
      },
      template: function($element, $attrs, langStrings) {
        let c = langStrings.get($attrs.code);
        return `<input placeholder = "` + c + `">`;
      }
    })
    .directive('i18nCustom', i18n)
    .controller('testCtrl', testCtrl)
    //i18n.$inject = ['langStrings'];
    .factory('langStrings', function() {
      this.get = (v) => {
        return v + '-transformed';
      };
      return this;
    })


})();

<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.js"></script>

<body ng-app = "app" ng-controller = "testCtrl">
  <input class = "i18n-custom" code='test-class'>
  <input i18n-custom code='test-attr'>
  <input ng-init = "z = lngs('test ctrl fun');" placeholder = "{{z}}">
  <i18c code = "Test Comp"></i18c>
</body>

01.11.2018 03:53

Другие вопросы по теме

Angularjs Множественное поле выбора в каждой строке

Переменная не привязана к AngularJS Controller, когда находится в компоненте внутри директивы "scope: false"

CSS сохраняет тег md-autocomplete

Перезагрузка источника JSON с помощью службы AngularJS

Фильтр даты md-datepicker: отправить объект из HTML в функцию md-date-filter

Можно ли связать md-autocomplete с полем ввода формы

Невозможно получить электронную почту от входа в facebook в angularjs

Создайте символическую ссылку из папки dist AngularJS в другую папку dist Angular.io

AngularJs (1.x) проблема маршрутизации в ngRoute?

Форматирование HTML div не приводит к желаемому результату

AngularJS использует компонент в качестве заполнителя тега ввода

Ответы 1

Другие вопросы по теме

Похожие вопросы