<section ng-app="app" ng-controller="ctrl">
<p ng-show="check && form.$invalid"></p>
<form name="form" ng-submit="init()">
<input type="text" ng-model="text" required/>
<!-- <input type="submit" ng-click="alterCheck()"/> -->
<input type="submit" ng-click="check=true"/>
</form>
</section>
angular.module('app', [])
.controller('ctrl', function($scope){
$scope.check = false;
$scope.init2 = function() {
$scope.text = '';
}
$scope.init = function() {
$scope.init2();
$scope.check = false;
}
$scope.alterCheck = function() {
$scope.check = true;
}
})
在实际项目中,使用 ng-click="check=true"
的方法会造成点击后 p
处于显示的状态,而 ng-click="alterCheck()"
则不会,请问这是什么原因呢?
上述代码无法复现我所说的现象。有什么额外的原因可能造成这一现象吗?
我想大声告诉你2017-05-15 17:05:45
이 예에서 설명한 것과 유사한 문제를 재현할 수 있습니다(이전에 직면한 적이 있어서 몇 번 더 살펴봤습니다).
으아악 으아악이것은
ng-repeat
를 사용하여 라디오 버튼 상자 세트를 표시하고 다음checkIndex: {{ checkIndex }}에서 클릭 버튼을 클릭하는 매우 간단한 데모입니다.
는 선택한 라디오 버튼의$index
를 표시합니다. 여기에서 온라인 데모를 확인하세요: jsfiddleng-repeat
显示一组单选框,通过点击点选按钮,在下面的checkIndex: {{ checkIndex }}
中显示选中的单选框的$index
。在线demo看这里:jsfiddle
如果运行当前的代码,会发现,{{ checkIndex }}
压根没有变化,无论你怎么使劲点,戳破鼠标也没用
但如果template
换成我注释掉的那部分代码,改用changeCheckIndex
方法,{{ checkIndex }}
就变化了。
那么问题来了,如何造成这个局面的?我们还是要回到文档去(最近发现ng
的文档还是不错的):
현재 코드를 실행해 보면我认为原因在于
checkIndex = $index
的写法,使得checkIndex
是一个在每个template instance中独立$scope
下的变量,并不是我们在Controller
{{ checkIndex }}
가 전혀 바뀌지 않은 것을 알 수 있습니다. 아무리 세게 눌러도 마우스를 찔러봐도 소용이 없습니다그러나
템플릿
이 내가 주석 처리한 코드 부분으로 대체되고 대신 changeCheckIndex
메서드가 사용되면 {{ checkIndex }}
는 변화. 🎜
🎜그렇다면 이런 상황은 어떻게 발생한 걸까요? 우리는 여전히 문서로 돌아가야 합니다(최근에 ng
의 문서가 꽤 훌륭하다는 것을 알았습니다): 🎜
🎜🎜
🎜🎜그 이유는 checkIndex = $index
를 작성하는 방식이 각 템플릿 인스턴스의 독립적인 $scope
아래에 checkIndex
를 변수로 만들기 때문이라고 생각합니다. Controller
에서 정의한 것이 아닙니다. 🎜🎜
🎜문서 주소: ngRepeat🎜