角度指令生成的輸入元素不顯示值

我創建了一個指令，允許我重現一些包含輸入字段的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 –

角度指令生成的輸入元素不顯示值

回答

相關問題