Question

在我的主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>

Controller.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/

Answer 1

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。

Answer 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();
        }
    }
}

希望这有帮助。

AngularJS ng-class，表单很脏时的条件

2 个答案: