3

我对 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'));
            };
        }]
    };
});

基本上它适用于一个按钮，但它不适用于两个按钮，我知道我应该隔离它们的范围，但我不知道如何......我见过周围的例子，但它们使用额外属性来传递变量，而我需要调用我的内部方法。

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

4

1 回答 1

0

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

然后，您将无法从您的控制器调用startSpinner和调用，您不应该这样做！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 回答