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 witch组件的限制）。

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

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

尝试使用链接功能尝试更简单的方法来更改指令上的elements属性

(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>

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

1 个答案: