Question

我对Angular很新，我尝试编写自己的指令来了解这些对象是如何工作的。我的问题是关于如何隔离我的指令的范围，以便我可以在同一个控制器中多次使用它。

我在这里创建了一个plunker来更好地解释这种情况：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'));
            };
        }]
    };
});

基本上它可以用一个按钮工作，但它不适用于两个按钮，我知道我应该隔离它们的范围，但我不知道如何......我已经看过周围的例子，但是当我需要调用我的内部方法时，他们使用额外属性来传递变量。

有人可以帮我弄清楚怎么做吗？谢谢！

Answer 1

您可以通过在指令定义中设置scope: {}来创建隔离范围。

然后，您将无法从控制器中呼叫startSpinner和stopSpinner，您不应该！在指令中使用ng-click或绑定指令中的单击处理程序而不是控制器中的单击处理程序。由于你的指令没有标记，我建议你做后者：

// added after the directive controller definition
link: function(scope, element) {
   element.on("click", function() { scope.startSpinner() });
}

在AngularJS指令中隔离范围

1 个答案: