AngularJS 使用组件作为输入标签占位符

Question

我有一个如下所示的本地化组件：

(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

Answer 1

输入占位符属性正在等待一个字符串。 <i18n> 是一个呈现 HTML 元素的组件，就像它的名称一样（指令中的限制，因为 Element 组件实际起作用）。

Angular 可以在属性上支持 interpolation。所以基本上，您需要创建类似 placeholder="{{exp}}" 的东西 exp 评估必须 return 一个字符串。

要么创建一个将输入呈现为 HTML
使用方法 {{langStrings.get(v)}} 并将其转换为 var，因此使用 placeholder="{{vm.text}}" 或 ng-init="z= lngs('asdf');" placeholder="{{z}}"
访问元素并更改其属性，这可以在组件的 link 函数或模板函数上完成。
或者基本上，您创建一些东西，它会转换一个字符串而不是呈现它的 HTML。使用 i18n 的自定义服务 4 示例。

尝试使用 link 函数

更简单的方法来更改指令上的元素属性

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

AngularJS 使用组件作为输入标签占位符

AngularJS use component as Input tag placeholder

javascript

angularjs

angularjs-directive

angularjs-components