AngularJS ng类，表单脏时的条件

debugcn 发表于 Dev

Photovor

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

AlwaysALearner

如果不使用$ 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();
        }
    }
}