15

テンプレートのない AngularJS ディレクティブがあり、現在のスコープにプロパティを設定したい場合、それを行う最善の方法は何ですか?

たとえば、ボタンのクリックをカウントするディレクティブは次のとおりです。

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

two way 属性の式にクリック数を割り当てるディレクティブを使用すると、次のようになります。

.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。私はこれを難しくしすぎているように感じます。

フルプランカーはこちら。

4

5 に答える 5

33

分離スコープがやり過ぎなのはなぜですか? まさにこの種のものに非常に役立ちます：

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

これは、この問題に対する非常に慣用的な角度の解決策であるため、これに固執します。

于 2013-09-18T21:18:32.503 に答える
2

を使用せずに、このように少し単純化することは間違いありません$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();
            });
        }
    };
}]);
于 2013-09-18T21:18:39.767 に答える
0

テンプレートを次のように変更します。

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

および指示：

.directive('twoway',
    function() {
        return {
            scope: {
                localValue: '=?bind'
            },
            link: function(scope, elem, attrs) {
                scope.localValue = {
                    val: 0
                };
                elem.on('click', function() {
                    scope.localValue.val = scope.localValue.val + 1;
                    scope.$apply();
                });
            }
        };
    }
);
于 2017-01-16T20:31:29.270 に答える