Angular JS数据绑定

我刚刚开始与Angular（再次）。Angular JS数据绑定

我找两个相关问题，就以下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，当我单击时，如何将选择框更新为选定/聚焦的输入框的字体。

感谢

来源

2014-10-06 Tim Webster

这个撬块将执行您要求的两件事：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>

有可能有更好的方法来完成所有这些，但希望这些编辑对你的掠夺者有帮助。

来源

2014-10-07 00:36:20

虽然这回答了这个问题。如果有100个文字区域，它很快就会变得混乱。在这种情况下，有没有更好的方式来动态设置当前集中的textarea上的样式，而不是拥有。 text1styles text2styles ... text100styles – 2014-10-07 21:16:12

我同意这种方法并不是最佳的，即使它在您的蹲跳者的情况下工作。更好的解决方案是使用pub/sub模式。在Angular中，你需要编写一个指令来监听字体变化事件，以便它可以更新元素的样式，如果它具有焦点。 – 2014-10-07 23:58:20

对于要控制，定义两个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}"

来源

2014-10-06 22:30:57 Sycomor

这不是说在焦点丢失时，输入上设置的任何样式都会丢失吗？即使输入当前没有集中，我也希望它们保持不变。 – 2014-10-06 22:43:20