Textarea не отображает текст по умолчанию с угловыми

Question

Textarea не отображает текст по умолчанию с угловыми

У меня есть следующий 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-> newscontent, но оно не отображается в фактическом текстовом поле браузера. Я также попробовал var myApp = угловой . модуль ( «myModule» , []) . контроллер ( «myController» , функция ( $ scope ) { $ scope . NewsContent = 'test data' ; }); связать с newscontent , $ parent.newscontent , newscontent.text , myCtrl.newscontent (с ng-контроллером, установленным в теге div), но все эти методы не задают данные по умолчанию (то есть $ scope.NewsContent ) в textarea-> newscontent . Хотя метод angular.element () успешно задает данные по умолчанию, но он не отображается внутри реального текстового поля в браузере. пожалуйста, помогите мне

Для справки это привязка с ng-моделью, где textarea кажется пустым. Изображение для текстовой области с ng-моделью и с помощью метода углового элемента выглядит как имеющее данные, но не рендеринг в реальной текстовой области. Изображение для текстовой области без ng-модели

javascript,html,css,angularjs,

0

Ответов: 3

JavaScript, HTML, CSS, angularjs,

Похожие вопросы

score 2 · Accepted Answer

2

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

ng-model

Я помещаю после тестирования в свой местный.

score 0 · Accepted Answer

0

Не используйте 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;

Таким образом, вы закончите тем, что ваша переменная инициализируется значением по умолчанию и, как плюс, вы будете работать с полным угловым способом.

score 0 · Accepted Answer

0

Я нашел решение проблемы, с которой я столкнулся. На самом деле я работаю над небольшим модулем проекта, поэтому я предположил , что текст-зона Я работаю с простым HTML теги, но когда я проверил голова тег , я обнаружил , что страница использует TinyMCE внутри сценария тега. Поэтому я немного искал информацию о TinyMCE и обновил код следующим образом:

Тег текстовой области обновляется для использования функций TinyMCE следующим образом:

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

Для того, чтобы установить angularjs с TinyMCE я скопированные настройки для 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 || '');
                    }
                };
            }
        };
    }]);

И включил TinyMCE в app.module следующим образом:

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. Большое спасибо.