Question

我目前正在使用Angular 1.5库，并希望为简单的文本框创建一个组件，如下所示。

组件JS

'use strict';

angular
    .module('components')
    .component('inputBox', {
        bindings: {
            label: '@',
            name: '@',
            type: '@',
            classes: '@',
            placeholder: '@',
            maxlength: '@'
        },
        controllerAs: 'field',
        templateUrl: 'app/components/inputBox.html'
    });

组件模板

<input type="{{field.type || 'text'}}"  
            class="form-control {{field.classes}}" 
            id="{{field.name}}" 
            name="{{field.name || 'unnamed'}}" 
            maxlength="{{field.maxlength}}" 
            placeholder="{{field.placeholder}}" />

所有模板中的用法。

<input-box 
    label="Enter an account"
    name="accountNumber"
    type="number"
    classes="form-control"
    placeholder="Account Number"
    maxlength="20"

    // directives
    ng-model="accountNumber"
    ng-custom1="value1" 
    ng-custom2="value2" 
    ng-custom-validator="value4" />

我有两个问题，我需要最佳实践。

我希望在使用模板中扩展所有指令，而不是组件的一部分。
哪种方法是@或=，但我对此选项有很好的理解。

一个。 “@”（文本绑定/单向绑定）

湾“=”（直接模型绑定/双向绑定）

℃。 “＆安培;” （行为绑定/方法绑定）

为什么采用这种方法？

我有大约27种形式，有很多输入类型。我想创建具有所有字段标签，输入和错误容器的单个组件。

Answer 1

有些事情令人困惑或错误：

您正在传递模型的名称，如

<input-box modelname="account.number"...

并尝试将其用于：

<input type="{{field.type || 'text'}}" 
        ng-model="account.number" ...

您没有使用modelname，而是尝试访问未定义的对象变量account.number（至少在您的示例中未定义），这不再是动态的。

如果您想直接传递模型，请执行以下操作：

angular
.module('components')
.component('inputBox', {
    bindings: {
        model: '=',
        ...
    },
    controllerAs: 'field',
    templateUrl: 'app/components/inputBox.html'
});

与

<input-box model="account" ... />

在您的组件模板中：

<input ng-model="model" ... />

关于你的第二个问题：你不能做

<input ... {{field.attribs}} />

你可以使用attrs并将它们复制到你的输入元素：

angular
.module('components')
.component('inputBox', {
    bindings: {
        model: '=',
        ...
    },
    controllerAs: 'field',
    templateUrl: 'app/components/inputBox.html',
    controller: function($scope, $element, $attrs) {
        angular.forEach($attrs, function(key, value){
            $element[key] = value;
        });
    }
});

至少我想知道为什么要将一个输入元素包装到一个组件中，除了复制属性之外什么都不做，你想要实现什么？

Answer 2

Angular团队建议使用单向绑定<或@而不是双向绑定=来隔离组件的范围。在从组件中获取值方面，建议使用事件。

基于组件的应用程序架构

部分下的完整详细信息here

在Angular 1.5中将指令传递给Component

组件JS

组件模板

所有模板中的用法。

2 个答案: