AngularJS指令-使用指令时ng-click不起作用

Posted 2023-02-19

【中文标题】AngularJS指令-使用指令时ng-click不起作用

【英文标题】：AngularJS Directive - ng-click not working when using the directive

【发布时间】：2018-09-07 11:32:18

【问题描述】：

我的新指令遇到问题。 ng-click 时变量没有被实现。我在这里找到了一些答案，但它们都调用了一个方法。我只是在点击时更改 2 个变量的值。

指令：

pmcApp.directive('sorting', function() 
    return 
        restrict : 'AECM',
        templateUrl : 'partials/directives/sorting.html',
        replace : true,
        scope : 
            title : "@",
            field : "@"
        
    
);

模板网址：

<a href="" ng-click="sortType = 'field'; sortReverse = !sortReverse;"> 
    title
    <span ng-show="sortType == 'field' && !sortReverse"                        
      class="glyphicon glyphicon-sort-by-attributes font-size-10"></span> 
    <span ng-show="sortType == 'field' && sortReverse"
      class="glyphicon glyphicon-sort-by-attributes-alt font-size-10"></span>
</a>

html

<!-- Using directive - Not work when we click -->
<td><sorting title="First Name" field="firstName"></td>
<td><sorting title="Last Name" field="lastName"></td>
<!-- Not using directive - work when we click -->
<td>
    <a href="" ng-click="sortType = 'username'; sortReverse = !sortReverse;"> 
        Email 
        <span ng-show="sortType == 'username' && !sortReverse"                            class="glyphicon glyphicon-sort-by-attributes font-size-10"></span> 
        <span ng-show="sortType == 'username' && sortReverse"                            class="glyphicon glyphicon-sort-by-attributes-alt font-size-10"></span>
    </a>
</td>

如下所示，所有 TD 在浏览时生成的代码几乎相同

<td>
    <a href="" ng-click="sortType = 'firstName'; sortReverse = !sortReverse;" title="First Name" field="firstName" class="ng-binding ng-isolate-scope"> 
        First Name 
        <span ng-show="sortType == 'firstName' &amp;&amp; !sortReverse" class="glyphicon glyphicon-sort-by-attributes font-size-10 ng-hide"></span> 
        <span ng-show="sortType == 'firstName' &amp;&amp; sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt font-size-10 ng-hide"></span>
    </a>
</td>

<td>
    <a href="" ng-click="sortType = 'lastName'; sortReverse = !sortReverse;" title="Last Name" field="lastName" class="ng-binding ng-isolate-scope"  > 
        Last Name 
        <span ng-show="sortType == 'lastName' &amp;&amp; !sortReverse" class="glyphicon glyphicon-sort-by-attributes font-size-10 ng-hide"></span> 
        <span ng-show="sortType == 'lastName' &amp;&amp; sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt font-size-10 ng-hide"></span>
   </a>
</td>

<td>
    <a href="" ng-click="sortType = 'username'; sortReverse = !sortReverse;"> 
        Email 
        <span ng-show="sortType == 'username' &amp;&amp; !sortReverse" class="glyphicon glyphicon-sort-by-attributes font-size-10"></span> 
        <span ng-show="sortType == 'username' &amp;&amp; sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt font-size-10 ng-hide"></span>
    </a>
</td>

当我们点击电子邮件时，它工作正常。但是当我们点击使用指令创建的名字或姓氏时，它不起作用。

【参考方案1】：

sorting 指令不会更改父作用域的属性。您正在修改 sorting 指令的本地范围，而不是像电子邮件这样的父范围。