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

对于您要控制的每个参数，定义两个css类，让我们调用它们.with和.without;然后在组件上使用ng-class指令：

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

您可以添加任意多个，并使用可以通过ng-click设置的各种标志（当您点击某些内容时），ng-change（当用户操作更改输入时），{{ 1}}（顾名思义）......

您实际上可以对ng-mouseover执行相同的操作，但如果您打算重复使用它们，那么将大多数样式重构为类通常是一种很好的做法。

编辑要回答以下问题：这取决于您的编码方式。例如，您可以为每个textarea提供单独的支持对象，以存储它们的值以及它们的状态。然后，您将根据标记ng-style而不是全局标记选择类。这个状态不会丢失，直到你对它做了一些事情（例如，如果你只想要选择一个textarea，你可以有一个取消选择另一个的功能）。或者您可以存储字体名称并执行area.selected

Answer 2

这个plunker会做你要求的两件事：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元素：

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

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

Angular JS数据绑定

2 个答案: