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标签中更新，但按下任何链接仍然会带我（如果按1月）“calendar / month / 2015-01- 01“无论$ scope.curyear是什么。任何人都有关于为什么会发生这种情况以及如何解决这个问题的任何意见？

提前致谢！

Answer 1

David Boskovic是对的。

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

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

我想你已经看到如何在David Boskovic的回答中使用ng-click。所以，我没有解释如何使用ng-click。

而且，我想在你的方法中指出另一个问题。

$("#yearp").text($scope.curyear);是一种jquery而不是角度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故障单中有详细说明。

推荐阅读：

将您的HTML更新为：

Caused by: javax.servlet.ServletException: java.lang.ClassCastException: action.ManageCarAction cannot be cast to org.apache.struts.action.Action
    at org.apache.struts.chain.ComposableRequestProcessor.process(ComposableRequestProcessor.java:286)
    at org.apache.struts.action.ActionServlet.process(ActionServlet.java:1913)
    at org.apache.struts.action.ActionServlet.doGet(ActionServlet.java:449)
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:620)
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:727)

你的控制器：

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

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

2 个答案: