Передача директив в Компонент в Angular 1.5

Question

Передача директив в Компонент в Angular 1.5

0

В настоящее время я использую библиотеку 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 форм со многими типами ввода. Я хочу создать единый компонент, который будет иметь все поля метки, ввода и ошибки контейнера.

Venkat.R 19 апр. 2016, в 20:49

Источник

Теги:

angularjs

angularjs-components

2 ответа

Ещё вопросы

kabaehr · Answer 1 · 2016-04-19T17-04-00.000Z

Есть некоторые вещи, довольно запутывающие или просто неправильные:

Вы передаете имя своей модели, как

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

и попытайтесь использовать его с:

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

Вы не используете свое имя модели, вместо этого вы пытаетесь получить доступ к переменной объекта 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;
        });
    }
});

По крайней мере, мне интересно, зачем переносить элемент ввода в компонент и делать не что иное, как копировать свойства, чего вы хотите достичь?

Спасибо за ваш ответ. обновил мой вопрос, что вы ищете? Кстати, ваш ответ не отвечает на вопрос

T Dog · Answer 2 · 2016-04-20T18-58-00.000Z

Команда Angular рекомендует выделение области для компонентов с использованием односторонней привязки < или @ а не двусторонней привязки =. Что касается получения значений из компонента, рекомендуется использовать события.

Подробнее здесь, в разделе Архитектура приложения на основе компонентов