Textarea不顯示使用angularjs設置的默認文本
[英]Textarea not showing default text set with angularjs
問題描述
我有以下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，但在實際的瀏覽器textarea中不可見。 我還嘗試了ng-model與newscontent ， $ parent.newscontent ， newscontent.text ， myCtrl.newscontent綁定 （在div標簽中設置了ng-controller），但是所有這些方法都沒有設置默認數據（即$ scope.NewsContent ）到textarea-> newscontent 。 盡管angular.element（）方法成功設置了默認數據，但是在瀏覽器的實際文本區域內看不到它。 請幫我
對於ng-model來說，這是一個好方法，其中textarea似乎是空白的帶有ng-model的文本區域的圖像，以及帶有角度元素方法的圖像，看起來像是在實際文本區域中具有數據但沒有呈現的圖像沒有ng-model的文本區域的圖像
3 個解決方案
解決方案1
2 2016-10-14 08:38:13
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>
我正在本地測試之后。
解決方案2
0 2016-10-14 07:10:41
請勿使用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工作方式中。
解決方案3
0 2016-10-19 14:18:09
我找到了解決所面臨問題的方法。 實際上，我正在項目的小型模塊上工作，因此我假設正在使用的文本區域是簡單的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，我從此處復制了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結構。 非常感謝你。
angularJS textarea-textarea不顯示文本
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.