Textarea 未显示使用 angularjs 设置的默认文本答案

【问题标题】：Textarea not showing default text set with angularjsTextarea 未显示使用 angularjs 设置的默认文本
【发布时间】：2016-10-14 07:07:43
【问题描述】：

我有以下 html 代码：

  <div class="form-group">
  <label class="col-md-4 control-label" for="newscontent">Article Contents</label>
  <div class="col-xs-6" id="Update_1" >
    <textarea class="form-control col-xs-12" id="newscontent" name="newscontent"></textarea>
  </div>
  </div>

并有一个以下角度脚本来将默认文本设置为文本区域上方

var app = angular.module('myApp',['ngRoute']);
          app.controller('myCtrl', function($scope,$http,$log,$location,$compile) { 

          $scope.newstitle=$location.search().title;

          $http({
                method: 'GET',
                url: '/loadnews/'+encodeURIComponent($scope.newstitle),

           })
            .then(function(response){
            $scope.News=response.data;

            $scope.img_url=$scope.News[0].image;
            $scope.Newstitle=$scope.News[0].title;
            $scope.NewsAuthor=$scope.News[0].author;
            $scope.NewsContent=$scope.News[0].content;
            $scope.ArticleDate=$scope.News[0].insertdate;
            $scope.NewsImage=$scope.News[0].image;
            $scope.NewsLocation=$scope.News[0].location;

            angular.element(document.getElementById("newscontent")
            .defaultValue=$scope.NewsContent);
          }

在浏览器的控制台中，我可以看到文本值已从 $scope.newscontent 加载到 textarea->newscontent 但在实际浏览器 textarea 中不可见。我还尝试将 ng-model 与 newscontent、$parent.newscontent、newscontent.text、myCtrl.newscontent 绑定strong> （在 div 标签中设置了 ng-controller），但所有这些方法都没有将默认数据（即 $scope.NewsContent）设置为 textarea->newscontent 。虽然 angular.element() 方法成功设置了默认数据，但在浏览器的实际文本区域中是不可见的。请帮帮我

对于参考，这是与 ng-model 的快照，其中 textarea 似乎为空白 Image for text area with ng-model 并且使用角度元素方法，它看起来像有数据但没有在实际文本区域中呈现 Image for text area without ng-model

【问题讨论】：

你确定response成功了吗？
angular.element(document.getElementById("newscontent").value=$scope.NewsContent);会工作的。
使用 ng-model 代替 id。 ng-model 旨在放入表单元素内部，并具有双向数据绑定 ($scope --> view and view --> $scope)跨度>
@Sankar Raj 是的，我得到了来自 angular.element 方法的响应，但没有来自 ng-model。接收到的数据在文本区域中不可见。

标签： javascript html css angularjs

【解决方案1】：

var myApp = angular.module("myModule", [])
        .controller("myController", function ($scope) {

            $scope.NewsContent = 'test data';
        });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<html ng-app="myModule">
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="angular.min.js" type="text/javascript"></script>
     <script src="app1.js" type="text/javascript"></script>
    </head>
    <body>
        <div ng-controller="myController">
               <form method="post" accept-charset="UTF-8" action="http://weebsite.com/h/">
    <div class="form-group">
  <label class="col-md-4 control-label" for="newscontent">Article Contents</label>
  <div class="col-xs-6" id="Update_1" >
    <textarea class="form-control col-xs-12" id="newscontent" name="newscontent" ng-model="NewsContent">{{NewsContent}}</textarea>

  </div>
  </div>
        </div>
    </body>
</html>

我在本地进行了测试。

【讨论】：

@Parag ：我已经更新了我的答案，实际上当时我还没有测试你的代码，我只是指导你，如何在你的视图中使用控制器的范围变量。现在您可以测试我的代码并在您的代码中使用，它处于工作状态。 :)
谢谢。您的解决方案在项目之外运行良好，但是一旦我在项目内部实施它，它就不会使用 ng-model 接收数据。但是 angular.element() 从数据库接收数据并将其分配给 textarea 但不显示在 TextArea 中
你能检查一下我在帖子末尾链接的图片吗？谢谢
是的，这是因为在您的项目中，您没有遵循 Angular js 的所有标准结构，因为这里甚至禁止使用 jquery，这就是我自己制作演示并向您解释的原因。 :)

【解决方案2】：

不要使用 javascript/jquery 选择器和 dom 操作：这是一种不好的做法。请改用ng-model。

将ng-model 添加到您的 HTML：

<textarea class="form-control col-xs-12" id="newscontent" name="newscontent" ng-model="textValue"></textarea>

并在控制器中设置您的 textValue 变量：

$scope.textValue = $scope.NewsContent;

这样，您最终会将变量初始化为默认值，此外，您将采用完整的 angularjs 工作方式。

【讨论】：

我尝试了您的解决方案，但 ng-model 不绑定 NewsContent，它显示没有分配给 textarea 的数据，但 angular.element 方法确实将默认值设置为我正在检索的数据。问题是我使用角度方法收到的数据未显示在实际文本区域中。

【解决方案3】：

我找到了解决我所面临问题的方法。实际上我正在研究项目的小模块，所以我认为我正在使用的文本区域是简单的 HTML 标记，但是当我检查 head 标记时，我发现该页面在 script 标记内使用 TinyMCE。所以我对 TinyMCE 进行了更多搜索，并相应地更新了代码如下：

文本区域标签已更新为使用 TinyMCE 功能，如下所示：

<textarea class="form-control col-xs-12" id="newscontent" name="newscontent" ui-tinymce ng-model="textValue"></textarea>

为了使用 TinyMCE 设置 angularjs，我从 here 复制了 Angularjs 的设置，如下所示：

<script>
            angular.module('ui.tinymce', [])
                   .value('uiTinymceConfig', {})
                   .directive('uiTinymce', ['uiTinymceConfig', function(uiTinymceConfig) {

        uiTinymceConfig = uiTinymceConfig || {};

        var generatedIds = 0;

        return {
                    require: 'ngModel',
                    link: function(scope, elm, attrs, ngModel) {

                    var expression, options, tinyInstance;
                // generate an ID if not present
                    if (!attrs.id) {
                        attrs.$set('id', 'uiTinymce' + generatedIds++);
                    }

                    options = {
                    // Update model when calling setContent (such as from the source editor popup)
                    setup: function(ed) {
                        ed.on('init', function(args) {
                            ngModel.$render();
                        });
                        // Update model on button click
                        ed.on('ExecCommand', function(e) {
                            ed.save();
                            ngModel.$setViewValue(elm.val());
                            if (!scope.$$phase) {
                                scope.$apply();
                            }
                        });
                        // Update model on keypress
                        ed.on('KeyUp', function(e) {
                            console.log(ed.isDirty());
                            ed.save();
                            ngModel.$setViewValue(elm.val());
                            if (!scope.$$phase) {
                                scope.$apply();
                            }
                        });
                    },
                        mode: 'exact',
                        elements: attrs.id
                    };


                if (attrs.uiTinymce) {
                    expression = scope.$eval(attrs.uiTinymce);
                } else {
                    expression = {};
                }

                angular.extend(options, uiTinymceConfig, expression);
                setTimeout(function() {
                    tinymce.init(options);
                });


                ngModel.$render = function() {
                    if (!tinyInstance) {
                        tinyInstance = tinymce.get(attrs.id);
                    }
                    if (tinyInstance) {
                        tinyInstance.setContent(ngModel.$viewValue || '');
                    }
                };
            }
        };
    }]);

并在app.module中包含TinyMCE如下：

var app = angular.module('myApp',['ui.tinymce']);

        app.controller('myCtrl', function($scope,$http,$log,$location,$compile) { 
            $scope.testcontr=$location.search().title;

          console.log($location.path());
          $http({
                    method: 'GET',
                    url: '/loadnews/'+encodeURIComponent($scope.testcontr),

               })
                .then(function(response){
                $scope.News=response.data;
                $scope.img_url=$scope.News[0].image;

                $scope.Newstitle=$scope.News[0].title;
                $scope.NewsAuthor=$scope.News[0].author;
                $scope.NewsContent=$scope.News[0].content;
                $scope.ArticleDate=$scope.News[0].insertdate;
                $scope.NewsImage=$scope.News[0].image;
                $scope.NewsLocation=$scope.News[0].location;
                $scope.textValue=$scope.NewsContent;
                },function(error){
                console.log(error);
                $log.info(error);
            });
    });

    </script>

现在文本区域正在呈现我从数据库中获取的网页上的默认值（之前显示为空白）。我很高兴也非常感谢您的回复。我会牢记@Luxor001 和@Jigar Prajapati 提出的遵循标准angularjs 结构的建议。非常感谢。

【讨论】：