5

angular 1.2rc3で動作するようにアップグレードに取り組んでいるオープンソースプロジェクトがあります。基本的に、フォーム ボタンの promise を処理します。この plnkr http://plnkr.co/edit/vQd97YEpYO20YHSuHnN0?p=previewでは、右側の [保存] をクリックすると、コンソールに [クリック済み] が表示されるはずです。指令：

            scope[functionName] = function () {
                console.log('clicked');
                //if it's already busy, don't accept a new click
                if (scope.busy === true) {
                    return;
                }

                scope.busy = true;
                var ret = scope.$eval(onClick);
                if (angular.isDefined(ret) && ret.hasOwnProperty('then')) {
                    ret.then(function () {
                        scope.busy = false;
                    });
                }
            };

1.2 では、次のコードが実行されても、このメソッドは実行されなくなりました。

            if (angular.isDefined(attrs.ngClick)) {
                console.log('test');
                attrs.$set('ngClick', functionName + '()');
            }

この関数が実行されない理由を理解できませんでした....何かアイデアはありますか?

4

2 に答える 2

3

リンク関数から ng-click 属性を変更するべきではありません。うまくいったのはまぐれだと思います。優先度を変更するのはハックです。あなたがやろうとしていることをもっと簡単に行う方法があると思います。変更された plunkr を見てください。

http://plnkr.co/edit/EypQbCc5wpw5xBWSiVuA?p=preview

あなたのディレクティブをビジークリックに変更し、ng-click を完全に置き換えました。ng-click を使用して操作しても意味がありません (最初は非常に単純なディレクティブです)。ご不明な点がございましたら、お知らせください。

ところで、ディレクティブを追加または変更する必要がある場合は、リンク関数ではなく、コンパイル関数を使用してこれを行います。

    directive('busyClick', function () {
    return {
        restrict: 'A',
        scope:{
          busyClick: '&',
          busyText: '@'
        },
        link: function (scope, el, attrs) {

            el.on('click', function(){
                scope.$apply(function(){

                  console.log('clicked');
                  //if it's already busy, don't accept a new click
                  if (scope.busy === true) {
                    return;
                  }
                  setBusy();
                  var ret = scope.busyClick();
                  if (angular.isDefined(ret) && ret.hasOwnProperty('then')) {
                    ret.then(function () {
                        setNotBusy();
                    });
                  }

                });

            });

            var originalText = el.text();

            function setBusy(){
              scope.busy = true;
              el.addClass('busy')
              if(angular.isDefined(scope.busyText)){
                el.text(scope.busyText);
              }
            }

            function setNotBusy(){
              scope.busy = false;
              el.removeClass('busy')
              el.text(originalText);
            }
        }
    };
});
于 2013-10-29T07:25:59.670 に答える