Angular Directive erzeugtes Eingabeelement zeigt keinen Wert an

Ich habe eine Direktive erstellt, die es mir erlaubt, HTML zu reproduzieren, das ein Eingabefeld enthält. Das Problem ist, wenn die Eingabe gerendert wird, das Wertfeld mit dem Wert aus dem Bereich gefüllt ist, aber aus irgendeinem Grund nicht angezeigt wird.Angular Directive erzeugtes Eingabeelement zeigt keinen Wert an

Funktioniert nicht in Chrome, Firefox oder MS Edge. Sie können an diesem Plunkr

HTML einen Blick:

<!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 haben Sie einen Blick auf die Plunkr wie der Code jetzt aktualisiert Um das wahre Problem zu zeigen, wurde das grundlegende Beispiel mit ng-Wert wie erwähnt gelöst aber durch @ Stefan.B löst nicht das ursprüngliche Problem

Quelle

2016-08-04 B Days

Sie sollten nicht direkt die vollständige Aufgabe des Umfangs passieren,

Controller: $scope.customer = { ... }

Ansicht: i-scope="customer"

stattdessen sollten Sie die Objekteigenschaften übergeben:

Steuerung: $scope.customer = { customer: { /*same as above */ };

Ansicht: i-scope="customer.customer"

oder:

Controller: $scope.customer = { ... }

Ansicht: i-scope-name="customer.name" i-scope-address="customer.address"

würde den Trick tun.

Erläuterung hier: https://github.com/angular/angular.js/wiki/Understanding-Scopes

Quelle

2016-08-04 19:49:04 user2131283

Sie value mit ng-value in der Vorlage ändern können.
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>";

Quelle

2016-08-04 18:10:16

Angewandt auf die Plunker es macht die Arbeit, aber es auf das Projekt Anwendung nicht aus irgendeinem Grund. Der Wert kommt zurück in das Wertfeld, wird aber nicht im Browser-Eingabefeld für den Benutzer angezeigt. Irgendwelche anderen Ideen? Ich werde den Plunker aktualisieren, um zu versuchen, genau das zu replizieren –

Bitte werfen Sie einen Blick auf den aktualisierten Plunkr –

Angular Directive erzeugtes Eingabeelement zeigt keinen Wert an

Antwort

Verwandte Themen