AngularJs ng-href 动态链接，范围不更新/工作

Question

我遇到了一个问题，其中带有 ng-href 标记的标记链接其中的范围参数会在范围更改时更新。我在这个答案 (Why does the directive ng-href need {{}} while other directives don't?) 中读到 ng-href 使用 $observe ，当范围值更改时，它应该更改 ng-href。

这里是有问题的 html 链接。它有两个用于更改年份的按钮，一个用于显示年份的 p 标签（id=yearp）和一个用于每个月的按钮（带有无法正常工作的链接）

<button id="left" style="display:inline;">left </button>
<p id="yearp" style="display:inline;"> {{curyear}} </p>
<button id="right" style="display:inline;"> right </button><br/>

<a ng-href="#calendar/month/{{curyear}}-01-01"><button style="display:inline;"> January </button></a>
<a ng-href="#calendar/month/{{curyear}}-02-01"><button style="display:inline;"> February </button></a>
<a ng-href="#calendar/month/{{curyear}}-03-01"><button style="display:inline;"> March </button></a>
<a ng-href="#calendar/month/{{curyear}}-04-01"><button style="display:inline;"> April </button></a>
<a ng-href="#calendar/month/{{curyear}}-05-01"><button style="display:inline;"> May </button></a>
<a ng-href="#calendar/month/{{curyear}}-06-01"><button style="display:inline;"> June </button></a>
<a ng-href="#calendar/month/{{curyear}}-07-01"><button style="display:inline;"> July </button></a>
<a ng-href="#calendar/month/{{curyear}}-08-01"><button style="display:inline;"> August </button></a>
<a ng-href="#calendar/month/{{curyear}}-09-01"><button style="display:inline;"> September </button></a>
<a ng-href="#calendar/month/{{curyear}}-10-01"><button style="display:inline;"> October </button></a>
<a ng-href="#calendar/month/{{curyear}}-11-01"><button style="display:inline;"> November </button></a>
<a ng-href="#calendar/month/{{curyear}}-12-01"><button style="display:inline;"> December </button></a>

这个页面的角度控制器看起来像这样

App.controller('yearController', function($scope){
    var cdt = new Date();
    $scope.curyear = cdt.getFullYear();
    $("#left").click(function(){
        $scope.curyear = $scope.curyear - 1;
        $("#yearp").text($scope.curyear);
    });
    $("#right").click(function(){
        $scope.curyear = $scope.curyear + 1;
        $("#yearp").text($scope.curyear);
    });
});

现在按下按钮 prev 和 next 正确更改 $scope.curyear 并在 yearp 标签中更新，但按下任何链接仍将带我到（如果按下一月）“日历/月/2015-01- 01"，无论 $scope.curyear 是什么。有人对为什么会发生这种情况以及如何解决有任何意见吗？

提前致谢！

Answer 1

大卫·博斯科维奇是正确的。

我只是想补充一些关于 angularJS 的基本观点。

在您的代码中，您将 Angular 与 jquery 事件混合在一起。你不应该那样做。您可以使用ng-click 属性在点击任何元素时触发事件。

我想您已经在 David Boskovic 的回答中看到了如何使用 ng-click。所以，我不是在解释如何使用ng-click。

另外，我想指出您方法中的另一个问题。

$("#yearp").text($scope.curyear); 是 jquery 而非 angular JS 的一种方式。

如果您将此变量绑定到您的 html，则此变量发生的任何更改也会自动更新到 html 上。所以，不用$("#yearp").text($scope.curyear);

注意，要增加一个变量，这里curyear你可以简单地用html本身编写你的逻辑。

<button id="left" ng-click="curyear = curyear + 1" style="display:inline;">left </button>

因此，您可以使用 Angular JS 更轻松地完成任务！！！

Answer 2

它没有更新的原因是因为您的点击回调在 Angular $digest loop 之外。但是，you shouldn't be accessing the DOM in a controller 有很多原因，这些原因在 Angular 文档和许多 StackOverflow 票证中有详细说明。

推荐阅读：

• "Thinking in AngularJS" if I have a jQuery background?
• Separating DOM manipulation from Angular controllers - Best Practice wanted
• Things I Wish I Were Told About Angular.js

将您的 HTML 更新为：

<button id="left" ng-click="prevYear()" style="display:inline;">left </button>
<p id="yearp" style="display:inline;"> {{curyear}} </p>
<button id="right" ng-click="nextYear()" style="display:inline;"> right </button><br/>

还有你的控制器：

App.controller('yearController', function($scope){
    var cdt = new Date();
    $scope.curyear = cdt.getFullYear();
    $scope.prevYear = function(){
        --$scope.curyear;
    }
    $scope.nextYear = function(){
        ++$scope.curyear;
    }
});