角手表未触发

Question

$ watch没有触发，然后我更改了日期选择器。 为什么？

更新：我注意到当我选择一个新日期时，我的departDate和returnDate并没有改变。 可能是什么原因？

 var app = angular.module("fly");

(function(){

    function Controller($scope, searchData) {



        $scope.$watch('departDate', function(newValue, oldValue){

            $scope.departDate = newValue;
            searchData.setDateFrom(newValue);

            if(searchData.getDateFrom() > searchData.getDateTo()) {
                searchData.setDateFrom(newValue);
                searchData.setDateTo(newValue);
                $scope.returnDate = newValue;

            }

        });

        $scope.$watch('returnDate', function(newValue, oldValue){

            $scope.returnDate = newValue;
            searchData.setDateTo(newValue);

            if(searchData.getDateFrom() > searchData.getDateTo()) {
                searchData.setDateFrom(newValue);
                searchData.setDateTo(newValue);
                $scope.departDate = newValue;
            }

        });


        $scope.datePickerStates = {
            open1:false,
            open2:false
        };

        $scope.open = function($event, opened) {
            $event.preventDefault();
            $event.stopPropagation();

            $scope.datePickerStates[opened] = true;
        };


        $scope.today = function() {
            $scope.dt = new Date();
        };
        $scope.today();

        $scope.clear = function () {
            $scope.dt = null;
        };

        $scope.toggleMin = function() {
            $scope.minDate = $scope.minDate ? null : new Date();
        };
        $scope.toggleMin();

        $scope.dateOptions = {
            formatYear: 'yyyy',
            startingDay: 1
        };

        $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
        $scope.format = $scope.formats[0];

    }

    app.controller('DatePickerController', Controller);


})();

HTML：

    <div class="col-md-2">
        <div class="input-group">
            <input type="text" class="form-control" datepicker-popup="{{format}}"  min-date="minDate" ng-model="departDate" is-open="datePickerStates.open1" ng-required="true" close-text="Close" />
            <span ng-click="open($event, 'open1')" class="btn btn-default input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>

    </div>

    <div class="col-md-2">
        <div class="input-group">
            <input type="text" class="form-control" datepicker-popup="{{format}}"   min-date="minDate" ng-model="returnDate" is-open="datePickerStates.open2" ng-required="true" close-text="Close" />
            <span ng-click="open($event, 'open2')" class="btn btn-default input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>

更新：

我在这里声明我的嵌套控制器并使用指令。

<div ng-controller="DatePickerController">
    <div ng-controller="PassengerController as pd">
        <div ng-controller="PlaceController as pc">
            <search-bar-md></search-bar-md>
            <search-bar-sm></search-bar-sm>
            <search-bar-xs></search-bar-xs>

            <pre>{{departDate}}</pre>
            <pre>{{returnDate}}</pre>

        </div>
    </div>
</div>

app.js

var app = angular.module("fly", ['ui.bootstrap', 'ngAnimate']);


app.factory('searchData', function () {

    var data = {
        travelFrom: '',
        travelTo: '',
        dateToday: new Date(),
        dateFrom: new Date(),
        dateTo: new Date()
    };

    return {
        getTravelFrom : function() {
            return data.travelFrom;
        },
        setTravelFrom : function(travelFrom){
            data.travelFrom = travelFrom;
        },
        getTravelTo : function(){
            return data.travelTo;
        },
        setTravelTo : function(travelTo){
            data.travelTo = travelTo;
        },
        /*** Travel dates ***/
        getTodayDate : function(){
            return data.dateToDay;
        },
        getDateFrom : function(){
            return data.dateFrom;
        },
        setDateFrom : function(dateFrom){
            data.dateFrom = dateFrom;
        },
        getDateTo : function(){
            return data.dateTo;
        },
        setDateTo : function(dateTo){
            data.dateTo = dateTo;
        }

    };
});




app.directive('navBar', function() {
    return {
        restrict: 'E',
        templateUrl: 'templates/navbar/navbar.html'
    };
});


app.directive('searchBar', function() {
    return {
        restrict: 'E',
        templateUrl: 'templates/search-bar/search-bar.html'
    };
});

app.directive('searchBarMd', function() {
    return {
        restrict: 'E',
        templateUrl: 'templates/search-bar/search-bar-md.html'
    };
});

app.directive('searchBarSm', function() {
    return {
        restrict: 'E',
        templateUrl: 'templates/search-bar/search-bar-sm.html'
    };
});

app.directive('searchBarXs', function() {
    return {
        restrict: 'E',
        templateUrl: 'templates/search-bar/search-bar-xs.html'
    };
});

Answer 1

创建包装对象应该可以解决该问题： http : //plnkr.co/edit/o8iwrVIYJq9wG74f0uR0?p=preview

主要更改是在DatePickerController添加包装器对象：

$scope.dates = {}

然后使用该对象存储日期，如下所示：

<div ng-controller="DatePickerController">
    <div class="col-md-2">
        <div class="input-group">
            <input type="text" class="form-control" datepicker-popup="{{format}}"  min-date="minDate" ng-model="dates.departDate" is-open="datePickerStates.open1" ng-required="true" close-text="Close" />
            <span ng-click="open($event, 'open1')" class="btn btn-default input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>

    </div>

    <div class="col-md-2">
        <div class="input-group">
            <input type="text" class="form-control" datepicker-popup="{{format}}"   min-date="minDate" ng-model="dates.returnDate" is-open="datePickerStates.open2" ng-required="true" close-text="Close" />
            <span ng-click="open($event, 'open2')" class="btn btn-default input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>

之所以可行，是因为ng-model用其他对象替换了引用对象的实例。 每个控制器都有自己的作用域，但它从其父作用域继承，但是当将嵌套控制器与ng-model一起使用时，仅修改中间$ scope的对象。 例如，如果我们有controller1和嵌套的controller2：

//Initial state:
controller1Scope.property='initial'
controller2Scope.property='initial' //Inherited from controller1 scope

//After ng-model="property" input is changed to 'new_value':
controller1Scope.property='initial'
controller2Scope.property='new_value'

如果使用包装对象，则该对象将在所有作用域中共享，并且当更改某些属性时，它将影响所有这些对象：

//Initial state:
controller1Scope.wrapper={property:'initial'}
controller2Scope.wrapper={property:'initial'} //Inherited from controller1 scope

//After ng-model="wrapper.property" input is changed to 'new_value':
controller1Scope.wrapper={property:'new_value'}
controller2Scope.wrapper={property:'new_value'} //Inherited from controller1 scope

Answer 2

使用一些默认值在控制器中初始化$scope.departDate和$scope.returnDate 。
JS：

function Controller($scope, searchData) {
    $scope.departDate = ''; //you can set your own default value
    $scope.returnDate = ''; //you can set your own default value
... }