Angular JS數據綁定

Question

我剛剛開始與Angular（再次）。

我找兩個相關問題，就以下plunker

http://plnkr.co/edit/anfQW9NcZs1WuPL8yKdJ

var app = angular.module('Designer', []) 
     .factory('TextModel', function() { 
      return { 
       'textAlign': 'left', 
     'fontFamily': 'Arial' 
      }; 
    }); 

app.controller('TextController', function($scope, TextModel){ 
    $scope.master = TextModel; 
    $scope.$watch("master",function(){ 
     $scope.textStyles = { 
      'text-align': $scope.master.textAlign, 
      'font-family': $scope.master.fontFamily 
     }; 
    }, true); 

    $scope.setAlignment = function(newAlignment){ 
     $scope.master.textAlign = newAlignment; 
    }; 

    $scope.setFont = function(font){ 
     $scope.master.fontFamily = font; 
    }; 
}); 

在這種回答，我怎麼能應用樣式僅當前焦點輸入框，而不是兩個。

同樣，如果我然後更改一個字體爲Times和另一個爲Verdana，當我單擊時，如何將選擇框更新爲選定/聚焦的輸入框的字體。

感謝

Answer 1

這個撬塊將執行您要求的兩件事：http://plnkr.co/edit/6jHNai3iDp5oOjPhAXne。

您可以通過具有分配給每個元素的NG-style屬性一個單獨的作用域值應用樣式僅當前焦點輸入框：

<textarea ng-style="text1Styles" ng-focus="setFontMenu($event, 1)">Test Text Area</textarea> 
<textarea ng-style="text2Styles" ng-focus="setFontMenu($event, 2)">Test Text Area</textarea> 

只有更新的一個重點在setfont程序功能。該setFontMenu功能是敏感的，其元素具有焦點：

$scope.setFontMenu = function(event, index) { 
    $scope.myFont = TextModel.getFont(event.target.style.fontFamily); 
    $scope.hasFocus = index; 
}; 

$scope.setFont = function() { 
    if ($scope.hasFocus === 1) { 
     $scope.text1Styles = { 
      'font-family': $scope.myFont.name 
     }; 
    } else if ($scope.hasFocus === 2) { 
     $scope.text2Styles = { 
     'font-family': $scope.myFont.name 
    }; 
} 

我更新你的工廠返回的字體列表，以便你可以看到TextModel如何能夠更加強大和束縛它的內容到你選擇的元素：

<select id="font_dd" ng-model="myFont" 
     ng-options="font.name for font in fonts" 
     ng-change="setFont()"> 
</select> 

有可能有更好的方法來完成所有這些，但希望這些編輯對你的掠奪者有幫助。

Answer 2

對於要控制，定義兩個CSS類，讓我們給他們打電話。隨着和。沒有每個參數;然後使用納克級的指令在組件上：

<textarea ng-class="{'with':selected, 'without':!selected}"></textarea> 

您可以添加你喜歡的許多人，並使用您可以通過ng-click設置各種標誌（當你點擊的東西），ng-change（當用戶操作改變一個輸入），ng-mouseover（顧名思義）...

實際上你也可以用ng-style來做同樣的事情，但是如果你打算重用它們，大多數風格都會重構成類。

編輯要回答你的問題：這取決於你如何編碼它。例如，您可以爲每個textarea設置單獨的備份對象，以存儲它們的值以及它們的狀態。然後，您將根據標記area.selected而不是全局標記來選擇課程。這種狀態不會丟失，直到你做了一些事情（例如，如果你只想選擇一個textarea，你可以有一個功能，取消選擇另一個）。 或者您可以存儲字體名稱本身，並且可以執行ng-style="{'font-family':area.font}"