說(shuō)明:

• angularJS中,ng-if,ng-repeat,ng-switch,ng-view,ng-include都會(huì)創(chuàng)建自己的子作用域,
  這意味著原始類型的變量及對(duì)象將不能通過(guò)$scope被直接傳值或調(diào)用;
  其中ng-repeat還帶有賦值行為;
• angularJS遵循原生JS的原型繼承機(jī)制,即如果我們?cè)谧幼饔糜蛑性L問(wèn)一個(gè)父作用域中定義的屬性,JS首先在子作用域中尋找該屬性,沒(méi)找到再?gòu)脑玩溕系母缸饔糜蛑袑ふ?如果還沒(méi)找到會(huì)再往上一級(jí)原型鏈的父作用域?qū)ふ?
• 所以被重新創(chuàng)建為子作用域的angular dom將不能被直接訪問(wèn)子屬性.同理也不能被$scope所影響.

解決方案:

1. 使用ng-show/ng-hide替代部分ng-if的效果:

• ng-show與ng-hide本質(zhì)上是通過(guò)控制css來(lái)實(shí)現(xiàn)dom的顯示/隱藏,等同于display:none;或visibility:hidden;;
• 很多業(yè)務(wù)場(chǎng)景中,在頁(yè)面上使用ng-if是為了控制dom的展現(xiàn),這種情形下可以用ng-show替代;
• ng-show與ng-if不同,在頁(yè)面被渲染完畢時(shí)ng-show中的內(nèi)容已經(jīng)靜態(tài)化,而ng-if的每次true判定都將初始化作用域下的內(nèi)容;
• 由上可得,ng-show中綁定的scope在頁(yè)面渲染完成后就已經(jīng)生效,是可以被直接使用的.

<div class="menu-item" ng-show="status === true">
    <input type="text" name="option_input" ng-model="option" required>
</div>

console.log($scope.option);

2.在父作用域中定義一個(gè)父類對(duì)象:

• 官方文檔中推薦使用此方法避免這個(gè)問(wèn)題的最佳實(shí)踐是在ng-model中總使用.;
• 在父作用域中定義一個(gè)父類對(duì)象,在子作用域中scope其屬性,
  這樣即使子作用域被重新創(chuàng)建,scope仍然可以通過(guò)搜尋原型鏈找到其父類對(duì)象,完成$scope操作;

$scope.opt = {};

<div class="menu-item" ng-if="status === true">
    <input type="text" name="option_input" ng-model="opt.option" required>
</div>

console.log($scope.opt.option);

3.其它方案:

• 在子作用域中使用 $parent.parentScopeProperty,這樣可以直接修改父作用域的屬性.

• 在父作用域中定義函數(shù),子作用域通過(guò)原型繼承調(diào)用函數(shù)把值傳遞給父作用域（這種方式極少使用）.

參考官方文檔: http://www.angularjs.cn/A09C