angularJs——input框綁定ng-model后js獲取不到問題

搬運自：https://blog.csdn.net/fenglongmiao/article/details/81545993

　　　　https://blog.csdn.net/Spearmint_/article/details/102470350?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

　　　　https://www.sheyingtg.com/detail/320191.html

 

與其他指令一樣，ng-controller指令也會創建一個子級作用域，因此，如果在ng-controller指令中添加了元素，並向元素屬性增加 ng-model指令，那么ng-model指令對應的作用域屬性子級作用域，而並非控制器注入的$scope作用域對象，這點在進行雙向數據綁定時，需要引起注意。

在ng-controller方式中，每個包含的元素都擁有自己的作用域，因此，復選框元素也擁有自己的$scope作用域。相對於控制器作用域來說，這個作用域屬於一個子級作用域，所以，如果它想綁定控制器中的變量值，必須添加$parent標識，只有這樣才能訪問到控制器中的變量。

 scope.$parent——指向scope的父作用域，在子級作用域中使用scope.$parent.name，來獲取對父級作用域的雙向綁定。

 

我的問題：初始化搜索關鍵字為空字符，控制器始終監聽不到關鍵詞輸入的變化。

解決方案：在綁定值時添加$parent標識

 

html:

<input type="text" ng-model="$parent.searchTxt" ng-change="listenTxt()">

 

js:

$scope.searchTxt = '';

$scope.listenTxt=function(){ console.log('searchTxt',$scope.searchTxt); }

 

同理，ng-if指令也會創建一個子級作用域，想要ng-model生效，需要在scope創建一個子對象才行

 解決方式：

1.使用$parent

2.使用ng-show(或ng-hide)可以間接解決這個問題。

3.使用$scope創建一個子對象，如

$scope.a = {num: '1'};

<input type="text" ng-model="a.num">