2016-04-18 9 views
0

したがって、SPAアプリケーションがあります。そのディレクティブのコールバックでディレクティブに割り当てられたngModelを変更します

Here on plunkerそれは多すぎるとして、私は、すべてのコードを貼り付けていないよ)あなたはそれの部品のレクリエーションを見ることができます(構造および階層が同じあります)。 問題をした

彼はそれを読んでなかったことを、私たちは、クライアントがチェックするための政策のドキュメントへのリンクとチェックボックスを持っているのいずれかのページでは、設計ドキュメントでは... を開始しました。デザインによって

:クライアントがポリシーのドキュメントを開いた後、クライアントは常にそれ

  • をチェックしようとすることができるように

    1. チェックボックスは常に(リンクをクリックして)、有効化され、チェックボックスがクライアントにチェック有効にしてください
    2. クライアントが(クリックした)ポリシー文書のリンクを開いていない場合にチェックボックスをオンにしても、マウスを離した時点でチェックされず、関連するエラーメッセージが表示されるはずです

    更新日:

    おかげコーエン Rafaeellooにとコビ私は、コードが多くを簡略化し得ることができ、時計、そして役に立たないものを取り除くために...

    今のところこれは私が持っているものです...

    ここに指示コントローラがあります:

    app.directive('checkBox', [function() { 
        var directive = { 
        scope: {}, 
        restrict: 'E', 
        controller: function() {}, 
        controllerAs: 'checkBoxCtrl', 
        bindToController: { 
         ngModel: '=', 
         callback: '&callback', 
         text: '@' 
        }, 
        templateUrl: 'check-box.directive.view.html', 
        link: function() {}, 
        require: 'ngModel' 
        }; 
        return directive; 
    }]); 
    

    そしてディレクティブHTML:ここ

    <div class="checkboxContainer"> 
        <label class="btn btn-checkbox" ng-class="{'active': checkBoxCtrl.ngModel}" 
                ng-click="checkBoxCtrl.ngModel = !checkBoxCtrl.ngModel; checkBoxCtrl.callback()"> 
         <span class="checkboxPic"></span> 
         <span class="checkboxText">{{checkBoxCtrl.text}}</span> 
        </label> 
    </div> 
    

    はビューhtmlです:

    <check-box text="check me" ng-model="viewCtrl.checkBoxResult" 
              callback="viewCtrl.callback()"></check-box> 
    <br/> 
    <a ng-click="viewCtrl.openGoogleClicked = true" href="//www.google.com" target="_blank">Open Google</a> 
    
    <hr> 
    
    <h3>Status</h3> 
    check box result: {{viewCtrl.checkBoxResult}}  
    <br/> 
    google opened: {{viewCtrl.openGoogleClicked}} 
    <br/> 
    callback function called: {{viewCtrl.callbackCalled}} 
    

    そして、これは、ビューコントローラである:

    angular.module('app').controller('viewController', ['$scope', function($scope) { 
        this.checkBoxResult; 
        this.openGoogleClicked; 
        this.callbackCalled; 
    
        this.callback = function callback() { 
        this.callbackCalled = true; 
        if (this.checkBoxResult && angular.isUndefined(this.openGoogleClicked)) { 
         this.checkBoxResult = false; 
        } 
        }; 
    }]); 
    

    質問/問題/開いた質問:Callbackは、ビューコントローラのngModelがb変更されました。したがって、私がcallbackの中のfalseに戻すかどうかを確かめるのではなく、callbackの後にdirective(私が理解するように)はそれに新しい値をバインドします。

    これに対して治療法はありますか?あなたが何をしようとして、あなたはここ(here)のようにそれを行うことによって

  • +1

    watch()を使用する代わりにngModelControllerを使用してください。 – be4code

    +0

    @Rafaeelloo私はヒントや例を教えていただけますか?それは本当に感謝します! (スコープ、要素、attrs、コントローラ){controllers [0] ... – neoselcev

    +1

    をtry:require: 'ngModel'コントローラ内の時計。違いが何であり、なぜこれが今働くのか説明してください。 –

    答えて

    1

    か、妥当性(here is example of writing your own validator)を決定する機能を有しているバリデータを書き込むことができ、その後、フォームやチェックボックスが私の中にあるものinvalidていますあなたがチェックボックスをチェックするのを拒否するよりも良いと思っています

    +0

    もう一度ありがとう! BTW私はバリデーターがここでより良いかもしれないことに同意しますが、それはクライアントの要件であったので、私はそれを変更することはできません... – neoselcev

    関連する問題