1

在我的主要 html 中（假设它使用 ng-controller="controller1"），我想在 div 上放置一个条件类，只要 ng-controller="controller2" 下的表单脏了，它就会改变其背景颜色。

有没有办法将它作为条件语句放在 ng-class 中？

会有多种形式和多个相关的 div 需要协调，所以我只是想提出最简单的方法。

编辑-我当前设置的示例代码：

HTML：

<html ng-app="testapp">
<body ng-controller="ControllerA">
    <p ng-class="{'updates-made' : boolUpdatesMade}">
        My background will change whenever an update is made on the form
    </p>

    <form name="editForm" ng-controller="ControllerB">
        <input type="text" name="changeme">
        <button ng-click="save()">Save</button>
    </form>
</body>
</html>

控制器.js：

testapp.controller("ControllerB", function($scope){
    $scope.save = function(){
        if($scope.editForm.$dirty){
            $scope.boolUpdatesMade = true;
        }

    }
}

我期望发生的是，当我在 ControllerB 中设置 boolUpdatesMade=true 时，CSS 类“updates-made”将应用于

在 HTML 中。事实并非如此。

这是此示例的 JSFiddle 链接：http: //jsfiddle.net/tPGLT/1/

4

2 回答 2

3

Angular 已经在表单（和单个字段）中添加了一个名为“ng-dirty”的类，只要它被触摸……假设您有一个表单元素可以附加到它。最简单的方法是创建一个 CSS 类，在此基础上使用您想要的任何样式。如果您更喜欢自己的课程，则可以执行 ng-class 来评估表单状态：

<form name="my_form" ng-class="{'class-name' : my_form.$dirty}">

编辑：

刚刚看到你想要这个在不同的 div 上。假设 Div 与表单在同一个控制器下，这仍然有效：

<form name="my_form">

和

<div ng-class="{'class-name' : my_form.$dirty}">

如果 div 与表单在不同的控制器范围内，它仍然是可能的，但您必须使用事件或服务在两个控制器之间进行通信。

现在开始喝咖啡了。看到您确实想在控制器之间进行通信，您可以在另一个答案中使用 $watch 技术来查看模型已更改（因为 $watch 不适用于表单状态），然后使用服务或 $ broadcast/$emit 在另一个控制器中设置一个 var。

于 2013-07-24T14:47:58.133 回答
2

如果不使用 $watch，父控制器无法判断子控制器内的模型何时发生变化。

（在这种情况下，被观看的模型并没有太大。但是，值得注意的是文档中的内容：“为了保存对象的值以供以后比较，使用了angular.copy函数。这也意味着观看复杂的选项会对内存和性能产生不利影响。 ")

有一种更简单的方法可以在不使用 $watch 的情况下做你想做的事：

testapp.controller("ControllerA", function($scope){     
    $scope.boolUpdatesMade = false;

    $scope.updateForm = function(){
        $scope.boolUpdatesMade = true;
    }
}

testapp.controller("ControllerB", function($scope){
    $scope.save = function(){       
        if($scope.editForm.$dirty){
            // dont update the parent's model inside the child
            // instead have the parent's method do that
            $scope.updateForm();
        }
    }
}

希望这可以帮助。

于 2013-07-24T15:00:36.707 回答