$scope.$watch 在选项卡内不起作用

Question

我有一个选项卡，其中嵌入了几个选定的按钮：

<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>

我的控制器如下所示：

$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!');
});

现在，虽然相同的方案适用select于我认为的其他按钮，但它不适用于嵌入在选项卡中的按钮。问题是范围中的那些变量没有被“监视”并且 angular 似乎没有记录任何更改（也就是说，当我在下拉菜单中选择不同的值时，控制台上没有打印任何内容）。这取决于<tab>还是我错过了其他东西？

更新：因此，如果我将三个selects移到<tab>元素之外，则$watch再次起作用。为什么<tab>元素是 的问题$watch？

Answer 1

我认为它在 tab 中不起作用的原因是因为 tab 有自己的范围。要修复，您可以尝试在对象模型上使用属性。例如在您的控制器中：

$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 的 UI 引导程序）。

这里发生的事情是 myData 原型是从父作用域（您的控制器）继承的，并且可以在该对象上看到相同的属性 (startYear)。当您直接在模型上使用原始属性时，它不会以您期望的方式工作（但会以应有的方式工作）。该文章有关范围是好的，并解释这一点更多的细节。当将 ng-model 用于此类场景时，建议在 angular 中使用这种类型的模式。