如果我将一个简单的输入文本框值设置为类似于下面的“bob”，则使用 AngularJS。如果ng-model添加了属性，则不会显示该值。
<input type="text"
id="rootFolder"
ng-model="rootFolders"
disabled="disabled"
value="Bob"
size="40"/>
任何人都知道一个简单的解决方法来将此输入默认为某些内容并保留ng-model? 我尝试将 ang-bind与默认值一起使用，但这似乎也不起作用。
这是所需的行为，您应该在控制器中而不是在视图中定义模型。
<div ng-controller="Main">
<input type="text" ng-model="rootFolders">
</div>
function Main($scope) {
$scope.rootFolders = 'bob';
}
Vojta 描述了“Angular 方式”，但如果你真的需要让它工作，@urbanek 最近发布了一个使用 ng-init 的解决方法：
<input type="text" ng-model="rootFolders" ng-init="rootFolders='Bob'" value="Bob">
https://groups.google.com/d/msg/angular/Hn3eztNHFXw/wk3HyOl9fhcJ
覆盖输入指令似乎可以完成这项工作。我对Dan Hunsaker的代码做了一些小改动：
$parse().assign()在没有 ngModel 属性的字段上使用之前添加了对 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);
}
}
};
});
正确的 Angular 方法是在表单模板中编写一个单页应用程序，AJAX，然后从模型动态填充它。默认情况下不会从表单填充模型，因为模型是唯一的真实来源。相反，Angular 会走另一条路并尝试从模型填充表单。
如果您编写了一个应用程序，这可能涉及一些相当大的架构更改。如果您尝试使用 Angular 来增强现有表单，而不是从头开始构建整个单页应用程序，您可以从表单中提取值并在链接时使用指令将其存储在作用域中。然后 Angular 会将作用域中的值绑定回表单并保持同步。
您可以使用相对简单的指令从表单中提取值并将其加载到当前作用域中。这里我定义了一个 initFromForm 指令。
var myApp = angular.module("myApp", ['initFromForm']);
angular.module('initFromForm', [])
.directive("initFromForm", function ($parse) {
return {
link: function (scope, element, attrs) {
var attr = attrs.initFromForm || attrs.ngModel || element.attrs('name'),
val = attrs.value;
if (attrs.type === "number") {val = parseInt(val)}
$parse(attr).assign(scope, val);
}
};
});
你可以看到我定义了几个后备来获取模型名称。您可以将此指令与 ngModel 指令结合使用，或者如果您愿意，可以绑定到 $scope 以外的其他内容。
像这样使用它：
<input name="test" ng-model="toaster.test" value="hello" init-from-form />
{{toaster.test}}
请注意，这也适用于 textareas，并选择下拉列表。
<textarea name="test" ng-model="toaster.test" init-from-form>hello</textarea>
{{toaster.test}}
更新：我的原始答案涉及让控制器包含 DOM 感知代码，这打破了支持 HTML 的 Angular 约定。@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在将模型设置为其值之前对属性执行更多操作，包括使用$parse(attrs.value, scope)将value属性视为 Angular 表达式（尽管我个人可能会为此使用不同的 [custom] 属性，因此标准 HTML 属性始终被视为常量）。
此外，在Make data templated in available to ng-model中也有一个类似的问题，这也可能很有趣。