Question

我有以下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>

并使用以下角度脚本将默认文本设置为textarea以上

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-＆gt; newscontent ，但在实际的浏览器textarea中不可见。我还尝试使用ng-model绑定 newscontent ， $ parent.newscontent ， newscontent.text ， myCtrl.newscontent （在div标签中设置ng-controller）但所有这些方法都没有将默认数据（即 $ scope.NewsContent ）设置为textarea-＆gt; newscontent 。虽然 angular.element（） 方法成功设置了默认数据，但在浏览器中的实际textarea中不可见。请帮帮我

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

Answer 1

＆＃13;

var myApp = angular.module("myModule", [])
        .controller("myController", function ($scope) {

            $scope.NewsContent = 'test data';
        });

＆＃13;

<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>

＆＃13;

我在我当地接受测试后。

Answer 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工作方式。

Answer 3

我找到了解决我遇到的问题的方法。实际上我正在研究项目的小模块，所以我假设我正在使用的文本区域是简单的HTML标记，但当我检查 head 标记时，我发现页面在脚本标记内使用 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结构的建议。非常感谢你。

Textarea未显示带angularjs的默认文本集

3 个答案: