私のコントローラの私の機能は動作しますが、ビュー（Angularjs）は更新されません

Question

私はいくつかのフィールドを持っています。ユーザーが[キャンセル]ボタンを押して編集モードを解除することができます

<button ng-click="cancelEdit();" ng-show="editable"> 
    <i class="fa fa-remove"></i> Cancel 
</button> 

イベント機能cancelEdit()を呼び出すNGクリックします。この機能で

$scope.cancelEdit = function(){ 
    $scope.editable=false; 
    $scope.jobNameInput = $scope.jobToView.name; 
    $scope.selectedPriority = $scope.jobToView.priority; 
    $scope.jobCommentsInput = $scope.jobToView.comments; 
} 

、私はfalseに編集モードのブール変数を設定し、（編集モードの前に）デフォルト値に私の入力の値を再初期化します。この関数は呼び出しされた後、値はなく、私の見解では、コントローラ用に更新されています

<button ng-click="editable=true;" ng-show="!editable"> 
    <i class="fa fa-edit"></i> Edit 
</button> 

変数編集可能がfalseに設定されている場合、このボタンは表示されます。ですから、私がキャンセルボタンをクリックすると、理論的に、ボタンの編集が表示されなければなりません。なぜこれは当てはまりませんか？

Answer 1

プリミティブは変更不可能です - つまり、その値は関数を呼び出すことで変更できません。

$scope.editableは、プリミティブであるbooleanの変数です。そのため、ビューは更新されません。その値は関数の終了時にのみ変更されます。

ビューに適用するには、をプリミティブ以外の値に変更する必要があります。これは、オブジェクトのプロパティとして設定した場合に実行できます。

など。

$scope.isEditable = { 
    value:false 
} 

次に、そのオブジェクトで遊んでください。あなたのケースでは：

<button ng-click="cancelEdit();" ng-show="isEditable.value"> 
    <i class="fa fa-remove"></i> Cancel 
</button> 

[編集]ボタン：

は、[キャンセル]ボタンを

<button ng-click="isEditable.value=true;" ng-show="!isEditable.value"> 
    <i class="fa fa-edit"></i> Edit 
</button> 

機能：ブール変数の答えをKorteのに

$scope.cancelEdit = function(){ 
    $scope.isEditable.value = false; 
    $scope.jobNameInput = $scope.jobToView.name; 
    $scope.selectedPriority = $scope.jobToView.priority; 
    $scope.jobCommentsInput = $scope.jobToView.comments; 
} 

Answer 2

感謝。 完了するために、入力に関して、私は私の質問に対する答えを見つけました。コントローラーで単に宣言する：var vm = this;;

そして単に、入力のモデルでは、書き込み：ng-model="vm.jobCommentsInput"

私は入力が私のブール変数として考えていると思うし、彼らがオブジェクトである必要があります。