Входной атрибут-заполнитель ожидает строку.<i18n> - это компонент, отображающий HTML-элемент, такой как его имя (ограничение в директивах, так как Элемент компонент ведьмы фактически действует).
Angular может поддерживать интерполяцию для атрибута,так что в основном вам нужно создать что-то вроде placeholder="{{exp}}", когда вычисление exp должно будет возвращать строку.
- Либо вы создаете компонент, отображающий ввод в виде HTML
- Использованиеметод
{{langStrings.get(v)}} и приведите его к переменной, поэтому используйте placeholder="{{vm.text}}" или ng-init="z= lngs('asdf');" placeholder="{{z}}" - Получите доступ к элементу и измените его атрибут, что можно сделать с помощью функции link или функции шаблонаcomponent.
- Или, по сути, вы создаете что-то, что вызывает строку, а не отображает ее HTML.Пример Custom Service 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>