AngularJs的ng-href动态链接，作用域没有更新/工作

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

本文关键字：更新 工作 作用域 ng-href 动态 链接 AngularJs      更新时间：2023-09-26

我遇到了一个问题，其中一个带有ng-href标签链接的标签，其中有一个范围参数，当范围发生变化时，它会更新。我在这个答案中读到(为什么指令ng-href需要{{}}而其他指令不需要'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按钮正确地改变$范围。年份，并在年份标签中更新，但按任何链接仍将带我到(如果按一月)"日历/月/2015-01-01"不管什么$范围。curyear。有人对为什么会发生这种情况以及如何修复它有任何意见吗?

提前感谢!

David Boskovic是正确的。

我只是想补充一些关于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 !!

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

推荐阅读:

  • "用AngularJS"如果我有jQuery的背景?
  • 从Angular控制器中分离DOM操作——最佳实践
    • 我希望我被告知的关于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;
    }
});
相关文章：