$scope.$watch 在选项卡中不起作用答案

【问题标题】：$scope.$watch is not working inside a tab$scope.$watch 在选项卡中不起作用
【发布时间】：2014-03-10 15:40:47
【问题描述】：

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

<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> 还是我错过了其他东西？

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

【问题讨论】：

<tab> 是否正在构建？有指令吗？
没有<tab> 的指令。一切都在 html 中编码。

标签： javascript angularjs controller

【解决方案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 将在您的选项卡指令中更新（我假设您正在使用带有角度的 UI 引导程序）。

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

【讨论】：