使中模板化的数据可用于ng模型

Question

当使用服务器端模板和客户端angularjs时，我无法让angularjs识别我在服务器上模板化的值。

例如（或在jsfiddle上）：

<div ng-app>
<div ng-controller="Ctrl">
    <textarea ng-model="data" placeholder="Enter a name here">Templated in</textarea>
    {{data}}
</div>
</div>

Angularjs将始终使用$scope的值替换文本区域中的值。数据（为空）。我想要的是$scope的值。数据将在应用程序引导中执行“模板化”，然后从此处正常继续。

如何从服务器中模板化一个值，然后让angularjs模型在客户端绑定该值？

Answer 1

我在试图自己解决这个问题时遇到了这个答案，但我从不喜欢将信息从HTML规范需要的字段部分移动。这对我来说不是个好办法。

有一段时间，我最终利用Angular位于jQuery（如果完整的jQuery不可用，则使用嵌入的jqLite子集）之上的事实来解决这个问题，而不移动内容，甚至不涉及ng init。具体来说，您可以在控制器初始化阶段使用（Angular/jqLite版本的）标准jQuery方法访问textarea的内容。

所以我就这么做了

var doc = angular.element(document.documentElement);

$scope.data = doc.find('textarea').eq(0).val();

在我的控制器中，正好是初始化任何其他范围变量的位置。（或者，这里是修改后的JSFIDLE…）

有了完整的jQuery库，代码就更简单了，因为此时您可以访问完整的jQuery选择器，并且可以直接跳转到$（'文本区域'）. eq（0）. val（）（甚至向字段添加id并选择在上面：$（'#data-文本区域'）. val（））。

这种方法的好处是它适用于任何表单元素，尽管大多数表单元素都是

这种方法还有一个主要缺点，就是在控制器中放置DOM感知代码，这完全打破了角度约定（Angular Way（TM））和MVC/MVVM编程范式。这不是最好的解决办法。

更新：所以我最终意识到我需要一个更长期的解决方案，一个不违反这么多最佳实践的解决方案。答案实际上来自于Angular最基本的元素，如果没有它，其余的部分将无法工作（你可以说，对于其他组件，但对于这个组件，它更为正确）：指令。更具体地说：

app.directive('input', ['$parse', function ($parse) {
    return {
        restrict: 'E',
        require: '?ngModel',
        link: function (scope, element, attrs) {
            if(attrs.value) {
                $parse(attrs.ngModel).assign(attrs.value, scope);
            }
        }
    };
}]);

这有许多优点。首先，它没有打破有助于增强MVC/MVVM的角度约定。其次，它甚至不涉及jqLite/jQuery，也不涉及底层DOM函数。第三，它具有保留HTML约定以定义默认值的预期效果，允许（或至少简化）与其他现有技术（如服务器端模板引擎）一起使用Angular。

为什么Angular在默认情况下不这样做？嗯，如果没有更多的研究，我不知道实际的答案，但是一个可能的答案是HTML约定支持静态页面内容，Angular是为动态页面内容设计的。这意味着在许多地方打破HTML惯例，而不是让它限制角度应用的可能性。由于期望控制器承担初始化模型的责任（在大多数情况下，这种期望是正确的），Angular团队有动机忽略值属性的内容（以及其他表单标记中的类似项）。

当然，使用这种方法，对于控制器初始化之前已经存在的任何适用元素，控制器init可以重写value属性。然而，这种行为在整个应用程序中是不一致的，因为新元素将触发指令评估，而不是控制器初始化阶段。（带有自己控制器的部分也保持这种行为——在部分控制器init之前已经就位的元素可以被所述init覆盖，但是在那之后添加的其他元素不会重新触发init。）

有许多其他方法可以编写这样一个指令，它也可以扩展到做任何其他事情，但希望这种方法可以帮助其他人。

Answer 2

使用ng init

<textarea ng-model="data" placeholder="Enter a name here"
 ng-init="data='Templated in'"></textarea>

另请参见AngularJS-当使用ng模型时，是否忽略输入文本框上的值属性？和
rails angularjs在编辑时将值加载到文本字段中