html - 使用 css 使表格响应后，Angular ng-click 不听

Question

我的表格单元格中有一个很棒的字体图标。如果我点击它，ng-click 正在监听并调用我的函数，但如果我的屏幕小于 900 像素，则 ng-click 不再监听。

这是我用来使表格响应的 CSS:

@media 
only screen and (max-width: 900px),
(min-device-width: 768px) and (max-device-width: 1024px)  {



/* Hide table headers (but not display: none;, for accessibility) */
thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
}
/* Force table to not be like tables anymore */
#tblTextResult, thead , tbody ,th ,td ,tr{
        display: block; 
}

tr { border: 1px solid black; }

td { 
    /* Behave  like a "row" */
    border-bottom: 1px solid black; 
    position: relative;
    padding-left: 30% !important; 

}

td:before { 
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 0px;
    left: 6px;
    width: 45%; 
    padding-right: 20px; 
    white-space: nowrap;
}

#tblTextResult i {
    display:tab;
}

/*
Label the data
*/
#tblTextResult td:nth-of-type(1):before { content: "Text"; }
#tblTextResult td:nth-of-type(2):before { content: "Text_ID"; }
#tblTextResult td:nth-of-type(3):before { content: "Description"; }
#tblTextResult td:nth-of-type(4):before { content: "Meaning_ID"; }
#tblTextResult td:nth-of-type(5):before { content: "Language"; }
} 

表格看起来不错，但我的标签 ({text.meaning_id}) 的 ng-click 不再起作用了。 这是我的 html:

 <div id="textResult" >
      <table id="tblTextResult" ts-wrapper>
        <thead>
            <tr>
                <th  class="tblTH"> <a href="#" ng-click="sortType = 'text';sortReverse = !sortReverse">
                Text 
                <span ng-show="sortType == 'text' && !sortReverse" class="fa fa-caret-down"></span> 
                <span ng-show="sortType == 'text' && sortReverse" class="fa fa-caret-up"></span> </a></th>

                <th  class="tblTH"> <a href="#" ng-click="sortType = 'text.id';sortReverse = !sortReverse">
                Text_ID 
                   <span ng-show="sortType == 'text.id'&& !sortReverse" class="fa fa-caret-down"></span>  
                   <span ng-show="sortType == 'text.id' && sortReverse" class="fa fa-caret-up"></span> </a></th>

                <th  class="tblTH"> <a href="#" ng-click="sortType = 'description';sortReverse = !sortReverse"> 
                Description 
                    <span ng-show="sortType == 'description'&& !sortReverse" class="fa fa-caret-down"></span>
                    <span ng-show="sortType == 'description' && sortReverse" class="fa fa-caret-up"></span> </a> </th>
                <th  class="tblTH">  <a href="#" ng-click="sortType = 'text.meaning_id';sortReverse = !sortReverse">
                 Meaning_ID   
                   <span ng-show="sortType == 'text.meaning_id'&& !sortReverse" class="fa fa-caret-down"></span> 
                   <span ng-show="sortType == 'text.meaning_id' && sortReverse" class="fa fa-caret-up"></span></a>   </th>
                <th  class="tblTH"> <a href="#" ng-click="sortType = 'langName';sortReverse = !sortReverse"> 
                Language   
                  <span ng-show="sortType == 'langName''&& !sortReverse" class="fa fa-caret-down"></span>
                  <span ng-show="sortType == 'langName' && sortReverse" class="fa fa-caret-up"></span> </a>  </th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="text in Texte | orderBy:sortType:sortReverse | filter:filterText" >
                <td>    {{text.text}}            </td>          
                <td >   {{text.id}}              </td>
                <td>    {{text.description}}     </td>
                <td ng-model="meaningID">   {{text.meaning_id}} <i name="btnSearch" click="getMeaningID()"ng-click="getMeaningID()"class="fa fa-search"></i></td>
                <td>    {{text.langName}}        </td>
            </tr>
         </tbody>        
    </table>
</div>

有人可以告诉我为什么我的 ng-click 在使此表响应后不再工作吗？我仍然可以看到 ng-click 被分配给了 Firebug 中的 i 标签! 感谢您的帮助:)

Answer 1

我的解决方案是:

#tblTextResult td i{
    display:table;
}

在我再次将此显示属性设置为表后，事件监听器再次监听:)