角度指令生成的输入元素不显示值

我创建了一个指令，允许我重现一些包含输入字段的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值解决了基本示例通过@ 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

你可以在你的模板与ng-value改变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 –

角度指令生成的输入元素不显示值

回答

相关问题