2015-08-28 262 views
0

我正在開發一個項目,我的要求是動態提供頁面的內容,它將包含不同的div或表格,並且我需要在運行時爲這些div傳遞樣式,這些樣式可以更改很多倍。我正在使用AngularJS進行該項目。我可以找到一些resource其中適用於該div的css的一個屬性是使用ng-model傳遞的,但是我想傳遞我的整個CSS屬性,該類的applicabe(可以是json)從頁面的Textarea元素。如何動態更改網頁的內容和樣式?

欣賞這方面的任何幫助。非常感謝 !我的代碼

部分看起來像:CSS我想傳遞的

<div ng-style="sampleStyle" class="col-md-6 ">{{sampleText}}</div> 

<textarea ng-model="sampleText" cols="40"> 
</textarea> 
<textarea ng-model="sampleStyle" cols="40"> 
</textarea> 

格式爲:

{ 
color: xxx; background: xxx; font-size: xx; ... 
} 
+0

你嘗試過什麼? –

+0

嗨psylogic,我試着將值傳遞給sampleStyle,但它沒有工作。雖然這可能聽起來多餘,但我也嘗試通過暴力將價值傳遞給ng風格,但即使這樣也不適合我。 檢視:

{{sampleText}}
<鈕納克單擊= 「的setStyle()」>集樣式 控制器: \t $ scope.setStyle =函數(){ \t \t \t $ scope.sampleStyle1 = {}; \t \t \t \t \t \t $ scope.sampleStyle1 = $ scope.sampleStyle; \t \t \t //console.log($scope.sampleStyle1); \t \t} \t \t \t \t \t \t

回答

0

嘗試使用ng-class代替。

HTML:

<div ng-class="sampleStyle" class="col-md-6 ">{{sampleText}}</div> 
<textarea ng-model="sampleText" cols="40"></textarea> 
<textarea ng-model="sampleStyle" cols="40"></textarea> 

編輯:

動態綁定的樣式文本的元素,你不能簡單地用一個NG-模型,因爲角度將它解釋爲一個字符串,不是一個對象。您需要首先使用$parse在範圍上創建一個js對象,並從ng樣式引用它。

HTML:

<div ng-class="myStyle" class="col-md-6 ">{{sampleText}}</div> 
<textarea ng-model="sampleText" cols="40"></textarea> 
<textarea ng-model="sampleStyle" ng-change="styleChangeFn()" cols="40"></textarea> 

JS:

app.controller('MainCtrl', ["$scope", "$parse", function($scope, $parse) { 
    $scope.styleChangeFn = function() { 
    $scope.myStyle = $parse($scope.sampleStyle)($scope); 
    } 
}]); 
+0

感謝您的溶液ShaharZ,但似乎使用溶液I可以傳遞任何類這已經存在於我的CSS中。無論我在文本區域sampleStyle中提供的內容如何,​​並且與col-md-6一起綁定到我的課程。我想要的是通過動態樣式,如{font-size:30px;紅色;填充:10px的; margin:10px; }來自文本區域本身。 –

+0

@NitinKumar對不起,誤解你在問什麼。更新了我的答案。請注意,出於學習Angular的目的,您可以這樣做,但對於雙向綁定樣式信息幾乎沒有實際的理由。通過創建自定義指令有更好的解決方案,但這是最簡單的 – ShaharZ