ng-if内のあるng-modelの入力値の取得

Question

###前提・実現したいこと

Monacaを使って開発している者です
本日急にng-if内のあるng-modelの入力値の取得ができなくなりました。
(昨日までは取得できておりました)
プラグインなどを意図的に変更はしていないのですが、こちらng-ifのまま対応する方法があったらご教授いただけると幸いです。

###発生している問題・エラーメッセージ

下記ソースコードを動かすと
console.logの値がundefinedになる

###該当のソースコード
【HTML】
<ons-page ng-controller="Controller">

<div class="b_black c_white align_c flex pt12 pb12"> <div ng-click="plan_show='list'" class="align_c w48 " ng-class="{c_tmain:plan_show=='list'}"> 一覧 </div> <div class="align_c w4 c_white" ng-class="font_color"> | </div> <div ng-click="plan_show='input'" class="align_c w48" ng-class="{c_tmain:plan_show=='input'}"> 登録 </div> </div> <div ng-if="plan_show=='list'"> <div>プラン名</div> <input type="text" ng-model="plan_name"> <div class="mt10 mb32"><ons-button ng-click="plan_create()">作成</ons-button></div> </div> </ons-page>

【JS】
module.controller('Controller', ['$scope', '$http', '$sce', function($scope, $http, $sce) {
$scope.plan_create = function() {
console.log($scope.plan_name);
};

###試したこと
ng-ifをng-showに切り替えると上手くいきます

Answer 1

このような場合はng-ifは利用できず、ng-showを利用する必要があります。

ng-ifが付与された要素が非表示になったとき、その要素はDOMから削除されますので、ng-modelの値はその瞬間に削除されます。
そのため、例え初期状態で画面表示されていて値が取得できていたとしても、一度非表示にするとその時点で値は取得できなくなり、再度表示しても以前の値は再取得できません。

急にng-modelの値が取得できなくなったのは恐らく、今まで初期画面で表示されていたng-ifの要素を初期画面で非表示にしたか、今まで非表示の制御をしていなかったのを、非表示にするという動作をコード上に実装したからではないでしょうか？
常時表示していれば、ng-ifの要素であっても値は取得できるものと思われます。

前述の動作から、非表示にする可能性のある要素の値が常時必要であれば、その要素に対しng-ifを使用することは残念ながら不可能ということになります。

ご自身でも試されたようですが、そのような場合ng-showを利用することになります。
これは非表示のときにもDOMから要素が削除されず、画面上で見えなくする属性を一時的に付与するという動きをしますので、ng-modelで参照していても値が途中で消えてしまうようなことはありません。