Textarea not showing default text set with angularjs

Question

I have following html code:

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

and have a following angular script to set default text to above 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);
          }

In the browser's console I can see the text value is loaded from $scope.newscontent to the textarea->newscontent but it is not visible in actual browser textarea. I have also tried ng-model to bind with newscontent ,$parent.newscontent ,newscontent.text, myCtrl.newscontent (with ng-controller set in div tag) but all these methods do not set default data(i.e. $scope.NewsContent) to the textarea->newscontent . Although the angular.element() method successfully set default data, but it is not visible inside actual textarea in the browser. Please help me

For the Reference this is snap with ng-model where textarea seems blank Image for text area with ng-model and with angular element method its look like having data but not rendering in actual text area Image for text area without ng-model

Answer 1

I found solution to the problem I was facing. Actually I am working on small module of the project, so I assumed that the text-area I am working with is simple HTML tag,but when I checked head tag I found that the page is using TinyMCE inside the script tag. So I searched little more about TinyMCE and updated the code accordingly as follows:

The text-area tag is updated to use TinyMCE functionality as follows:

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

To set the angularjs with TinyMCE I copied the settings for the Angularjs from here as follows:

<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 || '');
                    }
                };
            }
        };
    }]);

And included TinyMCE in app.module as follows:

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>

Now the text area is rendering the default value on web page(which was showing blank before) that I have fetched from database. I am so happy and very thankful to your replies.I'll keep in mind the suggestion given by @Luxor001 and @ Jigar Prajapati to follow standard angularjs structure. Thank you very much.

Answer 2

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>

I am putting after tested in my local.

Answer 3

Don't use javascript/jquery selector and dom manipulation: it's a bad practice. Use ng-model instead.

Add ng-model to your HTML:

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

and set your textValue variable in your controller:

$scope.textValue = $scope.NewsContent;

This way, you'll end up having your variable initialized to your default value and, as a plus, you'll be in a full angularjs way of work.