AngularJS$watch在if块中不工作
AngularJS $watch not working in if-block
我发现,我的角度脚本正在工作:
$scope.CurrentUser = null;
$scope.DatePicker = new Date();
$scope.$watch('DatePicker', function (newValue, oldValue) {
if (newValue > new Date())
$scope.DatePicker = new Date();
}, true);
<div>
<input data-ng-model="DatePicker" type="date" id="datepicker" />
</div>
但如果我添加一个if语句,则不会:
<div data-ng-if="!CurrentUser">
<input data-ng-model="DatePicker" type="date" id="datepicker" />
</div>
试试看:http://codepen.io/anon/pen/jWBEVM
但我不明白为什么。是否存在已知问题?有人能帮忙吗?
来自文档
此指令创建新的作用域。
所以,在你的情况下
<div data-ng-if="!CurrentUser">
<input data-ng-model="DatePicker" type="date" id="datepicker" />
</div>
DatePicker
在此添加在ng-if
作用域中,而不是来自控制器的作用域。
对于求解,可以使用$parent
属性
<div data-ng-if="!CurrentUser">
<input data-ng-model="$parent.DatePicker" type="date" id="datepicker" />
</div>
或应用"点规则"
<div data-ng-if="!CurrentUser">
<input data-ng-model="data.DatePicker" type="date" id="datepicker" />
</div>
和js
$scope.data = { DatePicker : new Date() };
$scope.$watch('data.DatePicker', function (newValue, oldValue) {
...
在wiki 中查看更多关于继承范围的信息
样品
var app = angular.module('myApp', []);
app.controller('BodyCtrl', function($scope, $http) {
$scope.CurrentUser = null;
$scope.DatePicker = new Date();
$scope.data = { DatePicker : new Date() } ;
$scope.$watch('DatePicker', function(newValue, oldValue) {
if (newValue > new Date())
$scope.DatePicker = new Date();
}, true);
$scope.$watch('data.DatePicker', function(newValue, oldValue) {
if (newValue > new Date())
$scope.data.DatePicker = new Date();
}, true);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<div data-ng-app="myApp" data-ng-controller="BodyCtrl">
<div>
<span>scope id: {{$id}}</span>
<input data-ng-model="DatePicker" type="date" id="datepicker" />
</div>
<div data-ng-if="!CurrentUser">
<span>scope id: {{$id}}</span>
<input data-ng-model="DatePicker" type="date" />
</div>
<div data-ng-if="!CurrentUser">
<span>scope id: {{$id}}</span>
<input data-ng-model="$parent.DatePicker" type="date" />
</div>
<hr/>
<div>
<span>scope id: {{$id}}</span>
<input data-ng-model="data.DatePicker" type="date" />
</div>
<div data-ng-if="!CurrentUser">
<span>scope id: {{$id}}</span>
<input data-ng-model="data.DatePicker" type="date" />
</div>
</div>
相关文章:
- 正在尝试使用if和else添加类,但无法正常工作
- jquery onclick if..否则如果..否则无法正常工作
- if 子句在 JavaScript 中限定工作流
- 此 JavaScript 代码无法正常工作(if-else 语句)
- JqueryUI,多个ID和else if 语句在可丢弃,我如何让它们工作
- 用于检查文件扩展名不工作的Javascript If语句
- 当if条件被添加到循环中时,Javascript函数将停止工作
- 为什么更改范围获胜'不能在ng if内部工作,而是通过函数调用AngularJS
- else-if子句未按预期工作
- 为什么不'我的if/else语句不能正常工作
- 可以't使if-else-jquery语句工作
- for循环,if else不工作Javascript
- Check IF条件返回false,但IF中的语句仍然可以在JavaScript中工作
- Javascript/JQuery嵌套if语句工作不正常
- Javascript if/else工作不正常[Time Formatting AM/PM]
- 为什么我的 IF 无法正常工作
- if.else 在 IIFy 中工作,但不在事件侦听器中工作
- 带有 if-else 的功能无法正常工作
- KnockoutJS “if: ” 绑定无法正常工作
- if 和 else-if 语句拒绝在 jQuery 的 AJAX 函数中工作