AngularJS指令-使用该指令时，按住ng键并单击不起作用

Question

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

指令：

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

TemplateURL：

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

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

Answer 1

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