Угловая директива, генерирующая элемент ввода, не отображающий значение

Я создал директиву, которая позволяет мне воспроизвести некоторый HTML-код, который включает поле ввода. Проблема заключается в том, что при визуализации ввода значение поля значения заполняется значением из области действия, но по какой-либо причине не отображается.Угловая директива, генерирующая элемент ввода, не отображающий значение

Не работает в Chrome, Firefox или MS Edge. Вы можете посмотреть на этой Plunkr

HTML:

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Example - example-directive-simple-production</title> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
<script src="script.js"></script> 
</head> 
<body ng-app="docsSimpleDirective"> 
    <div ng-controller="Controller"> 
     <form-input i-scope="customer" e-scope="errors" model="customer.name" name="name"></form-input> 
    </div> 
</body> 
</html>

(function(angular) { 
'use strict'; 
angular.module('docsSimpleDirective', []) 
.controller('Controller', ['$scope', function($scope) { 
$scope.customer = { 
    name: 'Naomi', 
    address: '1600 Amphitheatre' 
}; 
$scope.errors = {name:"name is required"}; 
}]) 
.directive('formInput', function() { 
    return { 
     restrict: "E", 
     scope: { 
     formInfo:'=iScope', 
     errors:'=eScope' 
     }, 
     replace:true, 
     template: function(elem,attr){ 
     return '<div><input type="text" name="' + attr.name + '" id="' + attr.name + '" ng-model="' + attr.model + '" value="{{ formInfo.' + attr.name + '}}" /><span ng-cloak ng-show="errors.' + attr.name + '">{{ errors.' + attr.name + ' }}</span></div>'; 
     } 
    }; 
    }); 
})(window.angular);

UPDATE Пожалуйста, посмотрите на Plunkr как код теперь обновлен чтобы показать истинную проблему, основной пример был решен с использованием ng-value, как указано по @ Stefan.B но не решает исходную задачу

источник

2016-08-04 B Days

Вы не должны проходить непосредственно полный объект сферы,

контроллер: $scope.customer = { ... }

вид: i-scope="customer"

вместо этого вы должны передать свойства объекта:

контролер: $scope.customer = { customer: { /*same as above */ };

вид: i-scope="customer.customer"

или:

контроллер: $scope.customer = { ... }

вид: i-scope-name="customer.name" i-scope-address="customer.address"

будет делать трюк.

Расшифровка здесь: https://github.com/angular/angular.js/wiki/Understanding-Scopes

источник

2016-08-04 19:49:04 user2131283

Вы можете изменить value с ng-value в шаблоне.
return "<div><input type='text' name="+ attr.name + " id=" + attr.name + " ng-model=" + attr.model + " ng-value=formInfo." + attr.name + " /><span ng-cloak ng-show='errors." + attr.name + "'>{{ errors." + attr.name + "}}</span></div>";

источник

2016-08-04 18:10:16

Применяя это к plunker делает его работу, но применяя его к проекту не по какой-то причине. Значение возвращается в поле значений, но не отображается в поле ввода браузера для пользователя. Любые другие идеи? Я буду обновлять плункер, чтобы попытаться воспроизвести это точно –

. Пожалуйста, посмотрите обновленный Plunkr –

Угловая директива, генерирующая элемент ввода, не отображающий значение

ответ

Смежные вопросы