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

此页面的 Angular Controller 如下所示

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 标记中更新，但按任何链接仍将带我到(如果按一月)“calendar/month/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。

如果将此变量绑定(bind)到 html，则此变量发生的任何更改也会在 html 上自动更新。因此，无需使用 $("#yearp").text($scope.curyear);

请注意，要增加变量，在这里 curyear 您可以简单地在 html 本身中编写逻辑。

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

所以，你可以使用 Angular JS 更轻松地做事!!!