0

我遇到一个问题，其中带有 ng-href 标记的标记链接其中的范围参数会在范围更改时更新。我在这个答案中读到（为什么指令 ng-href 需要 {{}} 而其他指令不需要？） ng-href 使用 $observe ，当范围值更改时应该更改 ng-href 。

这是有问题的html链接。它有两个用于更改年份的按钮，一个用于显示年份的 ap 标签（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 是什么。有人对为什么会发生这种情况以及如何解决有任何意见吗？

提前致谢！

4

2 回答 2

1

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

我只想添加一些关于 angularJS 的基本观点。

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

ng-click我想您已经在 David Boskovic 的回答中看到了如何使用。所以，我不是在解释如何使用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 更轻松地完成任务！！！

于 2015-10-22T05:21:35.873 回答
0

它不更新的原因是您的点击回调在 Angular$digest循环之外。但是，您不应该在控制器中访问 DOM，原因有很多，这些原因在 Angular 文档和许多 StackOverflow 票证中有详细说明。

推荐阅读：

将您的 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;
    }
});
于 2015-10-22T05:02:59.057 回答