1

メインの html (ng-controller="controller1" を使用しているとしましょう) で、 ng-controller="controller2" の下のフォームが汚れているたびに背景色を変更する条件付きクラスを div に配置したいと思います。

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

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 に答える