$ scope. $ watch does not work inside a tab

I have a tab with a few built-in buttons:

<tab id="graphTab" heading="Graph">
    <div class="analyze-select centered">
            <br></br>
            <h4>Filter by period:</h4>
            From:
            <select ng-model="startQuarter" ng-options="quarter for quarter in quarters"></select>
            <select ng-model="startYear" ng-options="year for year in years"></select>
            To:
            <select ng-model="endQuarter" ng-options="quarter for quarter in quarters"></select>
            <select ng-model="endYear" ng-options="year for year in years"></select> 

            <button class="btn btn-primary" type="submit" ng-click="filterTime()">Filter</button>
    </div>
</tab>

My controller is as follows:

$scope.startYear ='';
$scope.startQuarter = '';
$scope.endYear = '';
$scope.endQuarter = '';

$scope.$watch('startYear',function(){
    console.log('startYear has changed!');
});

$scope.$watch('endYear',function(){
    console.log('endYear has changed!');
});

$scope.$watch('startQuarter',function(){
    console.log('startQuarter has changed!');
});

$scope.$watch('endQuarter',function(){
    console.log('endQuarter has changed!');
});

Now, although the same scheme works for other buttons select, I have, in my opinion, it does not work for built-in tabs. The problem is that these variables are not observed in the area, and angular does not seem to register any changes (i.e. nothing is printed on the console when I select different values ​​from the drop-down menu). Does it depend on <tab>, or am I missing something else?

UPDATE: Therefore, if I move three selectout <tab>, the item $watchworks again. Why does the item <tab>present a problem for $watch?

+4
1

, , , , . , . , :

$scope.myData = {};

HTML:

....
<select ng-model="myData.startQuarter" ng-options="quarter for quarter in quarters"></select>
....

:

$scope.$watch('myData.startYear', function () {
    //Your code here
});

, , myData.startYear tab ( , angular).

, , myData ( ) (startYear) . , , ( , ). . angular ng- , .

+4

Source: https://habr.com/ru/post/1530992/


All Articles