代码之家 › 专栏 › 技术社区 › Jatin Sanghvi

如何将ng选项理解表达式传递给AngularJS组件?

angularjs-components angularjs-ng-options angularjs

1

Jatin Sanghvi · 技术社区 · 6 年前

我试图添加一个新绑定到现有的盎格鲁JS组件,它应该具有类型的值 comprehension_expression 如中所述 ng-options Directive API Reference .

请检查下面的代码以了解情况。注意顶部 <select> 控件通过名为 selectField . 它不显示任何选择选项。底部控件直接添加到 index.html 工作正常。

如果有人能告诉我脚本中是否有bug,我将不胜感激 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>

1 回复 | 直到 6 年前

1

georgeawg 6 年前

见 Why mixing interpolation and expressions is bad practice .

在这种情况下 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>