1

我有一个课程表，最初我让每一行都可以点击，然后切换模板ng-view并显示课程的详细信息。我的问题是我需要一个 Search Appliance 的爬虫来跟踪指向课程详细信息的链接，以使它们可用于搜索。我已经通过在表格的一个单元格中添加指向课程标题的链接来做到这一点，但现在我遇到了让学生实际点击标题链接和表格行的问题。我在哪里/如何取消其中一项操作，最好是标题链接（我想阻止页面加载两次）？这是我的模板的摘录：

<thead>
    <tr>
        <th>Title</th>
        <th>Instructor</th>
        <th>Days</th>
        <th>Time</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="course in catalog.courses | filter:isSubject" ng-click="loadCourse(course.regnum,course.id)">
        <td><a href="/schedule/#!/course/{{course.regnum}}/{{course.id}}">{{course.abbr}} {{course.num}} {{course.section}}: {{course.title}}</a></td>
        <td>{{course.instructor}}</td>
        <td>{{course.meeting_pattern}}</td>
        <td>{{course.start_time}} - {{course.end_time}}</td>
    </tr>
</tbody>

当有人单击第一个单元格中的链接时，链接和行的函数都会ng-click被调用，并且页面会加载两次。我想阻止链接href动作发生，只让ng-click动作处理请求。

我知道我必须以某种方式停止传播，但是如果我在元素上停止它<a>会影响元素上的功能<tr>吗？

4

2 回答 2

1

添加ng-click="$event.preventDefault();"到您要停止的链接。

<tr ng-repeat="course in catalog.courses | filter:isSubject" ng-click="loadCourse(course.regnum,course.id)">
    <td><a href="/schedule/#!/course/{{course.regnum}}/{{course.id}}" ng-click="$event.preventDefault();">{{course.abbr}} {{course.num}} {{course.section}}: {{course.title}}</a></td>
    <td>{{course.instructor}}</td>
    <td>{{course.meeting_pattern}}</td>
    <td>{{course.start_time}} - {{course.end_time}}</td>
</tr>

此外，您错过</a>了对该链接的关闭。

于 2013-09-09T19:56:29.490 回答
0

我在这里找到了部分解决方案：如何制作 AngularJS 指令来停止传播？

并使用了preventDefault()代替stopPropagation()功能。

<a href="/schedule/#!/course/{{course.regnum}}/{{course.id}}" stop-event="click">

然后创建了一个指令：

app.directive('stopEvent',function(){
    return {
        restrict: 'A',
        link : function(scope,el,attr){
            el.bind(attr.stopEvent,function(evt){
                evt.preventDefault();
            });
        }
    }
});
于 2013-09-09T19:57:52.243 回答