Question

我有一个课程表，最初我将每行都点击，然后在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>元素上的函数吗？

Answer 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>。

Answer 2

我在这里找到了部分解决方案：How can I make an AngularJS directive to stopPropagation?

并使用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();
            });
        }
    }
});

停止加载的单击链接，并使用Angularjs ng-click处理周围的元素来处理该操作

2 个答案: