3

私はAngularにかなり慣れていないので、これらのオブジェクトがどのように機能するかを学ぶために独自のディレクティブを作成しようとしています. 私の問題は、同じコントローラーで何度も使用できるように、ディレクティブのスコープをどのように分離するかに関するものです。

状況をよりよく説明するために、ここにプランカーを作成しました: http://plnkr.co/edit/NsISESR9sIs5Nf577DX4?p=preview

html:

<body ng-controller="MainCtrl">
  <button id="button1" ng-click="dummyClickFoo()" wait-button>Foo</button>
  <button id="button2" ng-click="dummyClickBar()" wait-button>Bar</button>
</body>

js:

app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
    $scope.dummyClickFoo = function() {
        $scope.startSpinner();

        setTimeout(function() {
                $scope.stopSpinner();
          }, 3000);
    };

    $scope.dummyClickBar = function() {
        $scope.startSpinner();

        setTimeout(function() {
                $scope.stopSpinner();
          }, 3000);
    };
});


app.directive('waitButton', function() {
    return {
        restrict: 'A',
        controller: ['$scope', '$element', function($scope, $element) {
            $scope.startSpinner = function() {
                alert($element.attr('id'));
            };

            $scope.stopSpinner = function() {
                alert($element.attr('id'));
            };
        }]
    };
});

基本的には 1 つのボタンで機能しますが、2 つのボタンでは機能しません。スコープを分離する必要があることはわかっていますが、方法がわかりません... 例を見てきましたが、extra-attributes を使用して変数を渡します。内部メソッドを呼び出す必要があります。

誰かがそれを行う方法を理解するのを手伝ってもらえますか? ありがとうございました！

4

1 に答える 1

0

scope: {}ディレクティブ定義で設定することにより、isolate スコープを作成します。

そうすると、コントローラーからstartSpinnerandを呼び出すことができなくなります。stopSpinnerディレクティブで ng-click を使用するか、クリック ハンドラーをコントローラーではなくディレクティブにバインドします。ディレクティブにはマークアップがないため、後者を行うことをお勧めします。

// added after the directive controller definition
link: function(scope, element) {
   element.on("click", function() { scope.startSpinner() });
}
于 2015-12-11T15:28:42.153 に答える