與其他指令一樣，ng-if指令也會創(chuàng)建一個(gè)子級作用域，因此，如果在ng-if指令中添加了元素，并向元素屬性增加 ng-model指令，那么ng-model指令對應(yīng)的作用域?qū)傩宰蛹壸饔糜颍⒎强刂破髯⑷氲?scope作用域?qū)ο螅@點(diǎn)在進(jìn)行雙向數(shù)據(jù)綁定時(shí)，需要引起注意。
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <style> .frame{ padding: 5px 8px; margin: 0px; font-size: 12px; width: 320px; background-color: #eee; } .frame div{ margin: 5px 0px; } </style> </head> <body> <div ng-controller="myCtrl" class="frame"> <div> a 的值： {{a}} <br> b 的值： {{b}} </div> <div> 普通方式： <input type="checkbox" ng-model="a"> </div> <div ng-if="!a"> ngIf方式：<input type="checkbox" ng-model="$parent.b"> </div> </div> <script> angular.module('myApp', []) .controller('myCtrl', function($scope){ $scope.a = false; $scope.b = false; }) </script> </body> </html> 在ng-if方式中，每個(gè)包含的元素都擁有自己的作用域，因此，復(fù)選框元素也擁有自己的$scope作用域。相對于控制器作用域來說，這個(gè)作用域?qū)儆谝粋€(gè)子級作用域，所以，如果它想綁定控制器中的變量值，必須添加$parent標(biāo)識，只有這樣才能訪問到控制器中的變量。
因此，解決ng-if中ng-model值無效的問題，主要方法就是在綁定值時(shí)添加$parent標(biāo)識，或者用ng-show指令代替ng-if指令，這兩種方法都可以達(dá)到同樣的頁面效果。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
