AngularJS自定义指令双向绑定

Question

如果我有一个没有模板的AngularJS指令，并且希望它在当前作用域上设置一个属性，那么最好的方法是什么？

例如，计数按钮单击的指令：

<button twoway="counter">Click Me</button>
<p>Click Count: {{ counter }}</p>

使用一个指令将单击计数分配给双向属性中的表达式：

.directive('twoway', [
'$parse',
  function($parse) {
    return {
      scope: false,
      link: function(scope, elem, attrs) {
        elem.on('click', function() {
          var current = scope.$eval(attrs.twoway) || 0;
          $parse(attrs.twoway).assign(scope, ++current);
          scope.$apply();
        });
      }
    };
  }
])

有更好的方法吗？根据我所读到的，一个孤立的作用域将是过度的，但我需要一个子范围吗？除了使用$parse之外，是否还有一种更简洁的方法来向指令属性中定义的范围变量进行回写。我只是觉得我把事情弄得太难了。

全柱塞这里。

Answer 1

为什么隔离范围过大？它对这类事情非常有用：

  scope: {
     "twoway": "=" // two way binding
  },

这是一个非常惯用的角度来解决这个问题，所以这就是我要坚持的。

Answer 2

我感到惊讶的是，没有人提到ng-model，这是执行两个数据绑定的默认指令。也许它不是很出名，但是链接函数有第四个参数：

angular.module('directive-binding', [])
  .directive('twoway', 
      function() {
        return {
          require: '?ngModel',
          link: function(scope, elem, attrs, ngModel) {
            elem.on('click', function() {
              var counter = ngModel.$viewValue ? ngModel.$viewValue : 0
              ngModel.$setViewValue(++counter);
              scope.$apply();
            });
          }
        };
      }
    );

对你的看法

<button twoway ng-model="counter">Click Me</button>
<p>Click Count: {{ counter }}</p>

第四个参数是ngModelController的API，它用于处理(例如解析和格式化)和在指令和作用域之间共享数据。

这是更新的柱塞。

Answer 3

如果不使用$parse，您肯定可以将它简化得像这样

angular.module('directive-binding', []).directive('twoway', [function () {
    return {
        scope: false,
        link: function (scope, elem, attrs) {
            elem.on('click', function () {
                scope[attrs.twoway] = scope[attrs.twoway] == null ? 1 : scope[attrs.twoway] + 1;
                scope.$apply();
            });
        }
    };
}]);