Блог

Главная - Вопросы по программированию - angular ng-модель исключает передачу

angular ng-модель исключает передачу

#javascript #angularjs #angularjs-directive

#javascript #angularjs #angularjs-директива

Вопрос:

Я пытаюсь создать пользовательские элементы, которые преобразуют мои элементы формы в соответствии со структурой стиля формы bootstrap

В основном,

 <my-input ng-model="myname">

должно стать

 <div class="form-element">
    <input ng-model="myname" />
</div>

Проблема в том, что когда я использую transclude, ng-модель переходит к корневому элементу, и результирующий DOM

 <div class="form-element" ng-model="myname">
    <input>
</div>

Можно ли выбрать, в какой внутренний элемент передается атрибут ng-model??

Если я создам другую директиву с именем my-model и использую ее вместо ng-model, как я могу перенести это во внутренний элемент ввода?

 <my-input my-model="myname">

должно стать

 <div class="form-element">
    <input ng-model="myname" />
</div>

Ответ №1:

Я думаю, что здесь нет необходимости использовать ng-transclude, вы можете просто иметь директиву

 <my-input model="myname">

и шаблон директивы

 <div class="form-element">
    <input ng-model="model" />
</div>

где область действия директив

 scope: {
    'model': '='
}

Используя это, вы можете иметь несколько моделей в директиве, и вы можете поместить их туда, куда захотите.

Комментарии:

1. Я хочу использовать model как директиву, а не как атрибут, потому что многие другие мои пользовательские директивы будут использовать этот синтаксис, и я не хочу каждый раз вводить model с изолированной областью видимости.

2. Тогда может сработать добавление ng-transclude для самого ввода <my-input ng-model="myname"> и шаблона директивы <div class="form-element"> <input ng-transclude /> </div>

Ответ №2:

ДА. Я столкнулся с этой проблемой некоторое время назад. Вам нужно привязать вашу ng-модель как свойство такого объекта, как.

 <div class="form-element">
<input ng-model="user.myname" />
</div>

И в контроллере убедитесь, что вы это сделали.

 $scope.user = {};

Таким образом, angular сможет найти ng-модель.

Метки: