AngularJS指令问题：ng-click触发时变量未更新

我懂你现在的困扰——在自定义指令的模板里想用ng-click直接修改sortType和sortReverse两个变量，但怎么试都没效果，而且不想为这点小事专门写个方法。其实这是AngularJS隔离作用域的作用范围导致的，我给你捋清楚并提供最直接的解决方案：

问题出在哪？ #

你的指令用了隔离作用域（scope: { title: "@", field: "@" }），这就意味着模板里ng-click里写的sortType和sortReverse，Angular会默认把它们当成指令自己作用域里的变量，而不是你期望的父作用域里的那些。直接赋值的话，只会在指令的隔离作用域里新建这两个变量，父作用域的变量根本没被改动，所以你看不到更新。

另外还有个小问题：你模板里写的sortType = '{{field}}'是错的——用{{}}插值会把field转成字符串字面量，就算作用域没问题，也没法正确绑定到字段名。

不用额外方法的解决方案 #

要让指令能直接修改父作用域的变量，只需要把这两个变量通过=双向绑定到指令的隔离作用域里，然后在模板里直接操作就行：

第一步：修改指令代码，添加双向绑定

pmcApp.directive('sorting', function() {
  return {
    restrict : 'AECM',
    templateUrl : 'partials/directives/sorting.html',
    replace : true,
    scope : {
      title : "@",
      field : "@",
      sortType : "=", // 双向绑定父作用域的sortType
      sortReverse : "=" // 双向绑定父作用域的sortReverse
    }
  }
});

第二步：修正模板的ng-click逻辑

<a href="" ng-click="sortType = field; sortReverse = !sortReverse;">
  {{title}}
  <!-- 可选：加个排序状态图标，让用户更直观看到排序方向 -->
  <span ng-show="sortType === field">{{sortReverse ? '↑' : '↓'}}</span>
</a>

第三步：在父模板中使用指令时传递变量

把父作用域里的sortType和sortReverse传给指令（注意属性名用短横线命名，Angular会自动转成驼峰）：

<sorting title="姓名" field="name" sort-type="sortType" sort-reverse="sortReverse"></sorting>

为什么这样就好使了？ #

• =绑定会在指令隔离作用域和父作用域的变量之间建立双向关联，修改指令里的变量会直接同步到父作用域，反过来也一样。
• 模板里直接用field而不是{{field}}，因为field已经通过@绑定到指令作用域，是个可用的变量，不用插值转成字符串。

这样你就不用写额外的方法，直接在ng-click里完成两个变量的修改啦！

内容的提问来源于stack exchange，提问作者Rafael Matos