Question

我遇到了新指令的问题。 ng-click时，变量未实现。我在这里找到了一些答案，但他们都称之为方法。我只是在点击时更改了2个变量的值。

指令：

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指令的本地范围，而不是像电子邮件那样修改父范围。

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

1 个答案: