使用AngularJS，如果我设置一个简单的输入文本框值为如下所示的“bob”。如果添加了ng-model属性，则不显示该值。
<input type="text"
id="rootFolder"
ng-model="rootFolders"
disabled="disabled"
value="Bob"
size="40"/>
有人知道一种简单的方法来默认这个输入并保留ng-model吗?我尝试使用默认值ng-bind，但这似乎也不起作用。
当前回答
更新:我最初的答案是让控制器包含dom感知的代码，这打破了Angular的惯例，转而支持HTML。@dmackerman在我的回答的评论中提到了指令，直到刚才我才完全忽略了这一点。有了这些输入，下面是正确的方法，在不打破Angular或HTML惯例的情况下做到这一点:
还有一种方法可以同时获得这两种方法——获取元素的值，并使用该值在指令中更新模型:
<div ng-controller="Main">
<input type="text" id="rootFolder" ng-model="rootFolders" disabled="disabled" value="Bob" size="40" />
</div>
然后:
app.directive('input', ['$parse', function ($parse) {
return {
restrict: 'E',
require: '?ngModel',
link: function (scope, element, attrs) {
if(attrs.value) {
$parse(attrs.ngModel).assign(scope, attrs.value);
}
}
};
}]);
当然，在将模型设置为value之前，您可以修改上面的指令，以对value属性做更多的操作，包括使用$parse(attrs。将value属性视为Angular表达式(尽管我个人可能会使用不同的[自定义]属性，因此标准HTML属性始终被视为常量)。
此外，还有一个类似的问题，在使数据模板可用ng-model，这可能也是感兴趣的。
其他回答
如果你使用AngularJs的ngModel指令，记住value属性的值不会绑定在ngModel字段上。你必须自己初始化它，最好的方法是
<input type="text"
id="rootFolder"
ng-init="rootFolders = 'Bob'"
ng-model="rootFolders"
disabled="disabled"
value="Bob"
size="40"/>
这是对之前答案的轻微修改。
不需要$parse
angular.directive('input', [function () {
'use strict';
var directiveDefinitionObject = {
restrict: 'E',
require: '?ngModel',
link: function postLink(scope, iElement, iAttrs, ngModelController) {
if (iAttrs.value && ngModelController) {
ngModelController.$setViewValue(iAttrs.value);
}
}
};
return directiveDefinitionObject;
}]);
重写输入指令似乎完成了这项工作。我对Dan Hunsaker的代码做了一些小改动:
在尝试对没有ngModel属性的字段使用$parse().assign()之前，增加了对ngModel的检查。 修正了assign()函数的参数顺序。
app.directive('input', function ($parse) {
return {
restrict: 'E',
require: '?ngModel',
link: function (scope, element, attrs) {
if (attrs.ngModel && attrs.value) {
$parse(attrs.ngModel).assign(scope, attrs.value);
}
}
};
});
我也有类似的问题。我不能使用value="something"来显示和编辑。 我必须在<input>中使用下面的命令，同时声明ng模型。
[(ngModel)]=userDataToPass.pinCode
其中，我有对象userDataToPass中的数据列表，我需要显示和编辑的项目是pinCode。
同样的，我参考了这个YouTube视频
更新:我最初的答案是让控制器包含dom感知的代码，这打破了Angular的惯例，转而支持HTML。@dmackerman在我的回答的评论中提到了指令，直到刚才我才完全忽略了这一点。有了这些输入，下面是正确的方法，在不打破Angular或HTML惯例的情况下做到这一点:
还有一种方法可以同时获得这两种方法——获取元素的值，并使用该值在指令中更新模型:
<div ng-controller="Main">
<input type="text" id="rootFolder" ng-model="rootFolders" disabled="disabled" value="Bob" size="40" />
</div>
然后:
app.directive('input', ['$parse', function ($parse) {
return {
restrict: 'E',
require: '?ngModel',
link: function (scope, element, attrs) {
if(attrs.value) {
$parse(attrs.ngModel).assign(scope, attrs.value);
}
}
};
}]);
当然，在将模型设置为value之前，您可以修改上面的指令，以对value属性做更多的操作，包括使用$parse(attrs。将value属性视为Angular表达式(尽管我个人可能会使用不同的[自定义]属性，因此标准HTML属性始终被视为常量)。
此外，还有一个类似的问题，在使数据模板可用ng-model，这可能也是感兴趣的。
