Question

我有一个角度ui datepicker元素，最初是隐藏的，我想检测日期变化。

<div ng-if="titleVisible">
  <input type="text" readonly 
    class="form-control" 
    datepicker-popup="{{format}}" ng-model="dt"
        is-open="mydp.opened" editable="false" 
            datepicker-options="dateOptions"
            date-disabled="disabled(date, mode)" 
            ng-required="true"
             /> <span>
            <button type="button" class="btn btn-default"
                ng-click="openDate($event)">
                <i class="glyphicon glyphicon-calendar"></i>
            </button>
            </span>

我定义了这个观察者：

$scope.$watch(function(scope) { return scope.dt },
        function(newValue, oldValue) {
            if(oldValue != newValue) //needed to avoid call on init
                console.log('dt has changed from '+oldValue+' to '+newValue);
        }
       );

这个观察者永远不会触发，控制台日志永远不会显示。无论如何，通过从组件定义中删除ng-if（从而使其最初可见），它可以工作。怎么解决这个问题？

Answer 1

ng-if创建子范围。当您尝试从父作用域中查看name时，它不会看到更改，因为在name的子作用域中创建了ng-if。

一种解决方案是初始化父作用域中的对象，然后使dt成为该属性。

app.controller('MainCtrl', function($scope) {
  $scope.myObj = {};

  $scope.$watch('myObj.dt', function(newValue, oldValue) {
     if(oldValue != newValue) //needed to avoid call on init
         console.log('dt has changed from '+oldValue+' to '+newValue);  
  });
});

HTML

<div ng-if="titleVisible">
  <input type="text" readonly 
    class="form-control" 
    datepicker-popup="{{format}}" ng-model="myObj.dt"

Plunker：http://plnkr.co/edit/UmXqZDshVHOOLVYzZRZp?p=info

使用ng-hide代替ng-if也应该有用。

$ watch事件不会触发最初不可见的元素

1 个答案: