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按钮，但它不适用于选项卡中嵌入的那些按钮。问题是范围内的那些变量没有被“观察”，而角度似乎没有记录任何变化（也就是说，当我在下拉菜单中选择不同的值时，控制台上没有打印任何内容）。这取决于<tab>还是我遗漏了其他内容？

更新：因此，如果我移动select元素<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指令中更新（我假设你正在使用带有角度的UI引导程序）。

这里发生的是myData原型继承自父作用域（您的控制器），并且可以在该对象上看到相同的属性（startYear）。当您直接在模型上使用原始属性时，它不会按照您期望的方式工作（但按其应有的方式工作）。这个article about scopes很好，可以更详细地解释一下。对于像这样的场景使用ng-model时，建议使用这种类型的模式。

$ scope。$ watch在标签内不起作用

1 个答案: