在AngularJS指令中隔离作用域

Question

在AngularJS指令中隔离作用域

javascriptangularjsangularjs-directiveisolate-scope

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

基本上它可以使用一个按钮，但是不能使用两个按钮。我知道我应该隔离它们的作用域，但我不知道该如何做... 我看到周围有一些例子，但它们使用额外的属性来传递变量，而我需要调用我的内部方法。

有人能帮我想出如何做吗？谢谢！

- pardie

我在[http://www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/]找到了清晰的解释，请参考此链接。 - Jinna Balu

1

@wizzy，我认为你可能重复了你的问题... 我在另一个问题上回答了，但也会在这里引用它。请参阅此答案 - https://dev59.com/MJHea4cB1Zd3GeqPwPfN#34229936 - jusopi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lex82 · Answer 1

通过在指令定义中设置scope: {}，您可以创建一个隔离作用域。

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

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