AngularJs ng-href 动态 link 范围不是 updating/working

Question

我遇到一个问题，当范围发生变化时，带有 ng-href 标签 link 且其中包含范围参数的标签确实会更新。我在这个答案 (Why does the directive ng-href need {{}} while other directives don't?) 中读到，ng-href 使用 $observe，它应该在范围值更改时更改 ng-href。

这是有问题的 html link。它有两个用于更改年份的按钮，一个用于显示年份的 p 标签 (id=yearp)，以及一个用于每个月的按钮（links 无法正常工作）

<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 控制器如下所示

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 标签中更新，但按任何 links 仍会带我到（如果按 January） "calendar/month/2015-01-01" 不管 $scope.curyear 是什么。有人对为什么会发生这种情况以及如何解决它有任何意见吗？

提前致谢！

Answer 1

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

推荐阅读：

"Thinking in AngularJS" if I have a jQuery background?
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;
    }
});

Answer 2

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

我只想补充一些关于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 做事更轻松！！！

AngularJs ng-href 动态 link 范围不是 updating/working

AngularJs ng-href dynamic link with scope not updating/working

html

javascript

angularjs

angularjs-ng-href