Как передать ng-options comprehension_expression в компонент AngularJS?

Я пытаюсь добавить новую привязку к существующему компоненту AngularJS, который должен принимать значение типа comprehension_expression, как описано в Справочник по API директивы ng-options.

Пожалуйста, проверьте код внизу, чтобы понять ситуацию. Обратите внимание, что верхний элемент управления <select> поступает через компонент с именем selectField. Он не показывает никаких вариантов выбора. Нижний элемент управления добавляется непосредственно в index.html и работает правильно.

Я был бы признателен, если бы кто-нибудь сказал мне, есть ли ошибка в моем скрипте, какие-либо альтернативные подходы к передаче значения атрибута ng-options в шаблон или дайте мне знать, что компонент или директива не могут иметь такие привязки.

angular.module('myApp', [])
  .controller('MainController', function MainController() {
    this.colors = ['red', 'blue', 'green'];
    this.myColor = this.colors[1]; // blue
  }).component('selectField', {
    template: `
      <select ng-model="$ctrl.inputModel"
              ng-options="{{::$ctrl.inputOptionsExpression}}">
      </select>
      Selected: {{$ctrl.inputModel}}</span>
    `,
    bindings: {
      inputModel: '=',
      inputOptionsExpression: '@'
    }
  });
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>

<body ng-app="myApp">
  <div ng-controller="MainController as vm">
    <div>
      <select-field input-model="vm.myColor"
                    input-options-expression="color for color in vm.colors">
      </select-field>
    </div>
    <div>
      <select ng-model="vm.myColor" 
              ng-options="color for color in vm.colors">
      </select>
      Selected: {{vm.myColor}}
    </div>
  </div>
</body>

</html>


angularjs angularjs-ng-options angularjs-components
person Jatin Sanghvi    schedule 09.08.2018    source источник
comment
Сделанный. Включил код в вопрос.   -  person Jatin Sanghvi    schedule 09.08.2018
comment
Возможный дубликат Почему смешивание интерполяции и выражений является плохой практикой.   -  person georgeawg    schedule 09.08.2018

Ответы (1)


arrow_upward
1
arrow_downward

См. раздел Почему смешивание интерполяции и выражений является плохой практикой.

В этом случае директива ng-options будет анализировать выражение понимания до того, как директива интерполяции отобразит желаемое выражение.

Перепишите компонент для ввода вариантов:

app.component('selectField', {
    require: {ngModelCtrl: 'ngModel'},
    bindings: {
      ngModel: '<',
      choices: '<'
    },
    template: `
      <select ng-model="$ctrl.ngModel"
              ng-change="$ctrl.render($ctrl.ngModel)"
              ̶n̶g̶-̶o̶p̶t̶i̶o̶n̶s̶=̶"̶{̶{̶:̶:̶$̶c̶t̶r̶l̶.̶i̶n̶p̶u̶t̶O̶p̶t̶i̶o̶n̶s̶E̶x̶p̶r̶e̶s̶s̶i̶o̶n̶}̶}̶"̶ ̶
              ng-options="c for c in choices">
      </select>
      Selected: {{$ctrl.ngModel}}</span>
    `,
    controller: function() {
        this.render = (value) => {
            this.ngModelCtrl.$setViewValue(value);
        };
    }
})

Применение:

<select-field ng-model="vm.myColor" choices="vm.colors">
</select-field>

ДЕМО

angular.module('myApp', [])
.controller('MainController', function MainController() {
    this.colors = ['red', 'blue', 'green'];
    this.myColor = this.colors[1]; // blue
})
.component('selectField', {
    require: {ngModelCtrl: 'ngModel'},
    bindings: {
      ngModel: '<',
      choices: '<'
    },
    template: `
      <fieldset>Select field
      <select ng-model="$ctrl.ngModel"
              ng-change="$ctrl.render($ctrl.ngModel)"
              ng-options="c for c in $ctrl.choices">
      </select>
      Selected: {{$ctrl.ngModel}}
      </fieldset>
    `,
    controller: function() {
        this.render = (value) => {
            this.ngModelCtrl.$setViewValue(value);
        };
    }
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="myApp" ng-controller="MainController as vm">
    <div>
      <select-field ng-model="vm.myColor"
                    choices="vm.colors">
      </select-field>
    </div>
    <div>
      <select ng-model="vm.myColor" 
              ng-options="color for color in vm.colors">
      </select>
      Selected: {{vm.myColor}}
    </div>
</body>

person georgeawg    schedule 09.08.2018