个人中心
gpt4 book ai didi

javascript - 在 AngularJS 指令中隔离范围

转载 作者：行者123 更新时间：2023-12-04 17:20:32 25 4
gpt4 key购买 nike

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

我在这里创建了一个 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'));
            };
        }]
    };
});

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

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

最佳答案

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

然后您将无法从您的 Controller 调用 startSpinner 和 stopSpinner，您不应该这样做!在您的指令中使用 ng-click 或在指令中而不是在 Controller 中绑定(bind)点击处理程序。由于您的指令没有标记，我建议您使用后者:

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

关于javascript - 在 AngularJS 指令中隔离范围，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34226912/

25 4 0
文章推荐： cuda - 在线程内使用推力::排序
文章推荐： javascript - knockout :编写和读取计算属性
文章推荐： php - 获取 PHP ZipArchive 类的官方源代码
文章推荐： google-apps-script - 在谷歌文档中嵌入谷歌趋势图表
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com