如何在可重用指令中分隔按钮的范围 [英] How to separate scopes of buttons inside a reusable directive

查看:21
本文介绍了如何在可重用指令中分隔按钮的范围的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我需要一个带有多个按钮的可重用指令.但我的问题是当我尝试多次使用同一个指令时,这些按钮绑定到一个单一的作用域.例如看下面的代码:

I need to have a reusable directive with several buttons.But my problem is when I try to use the same directive multiple times the buttons binds to one single scope. For example see the code below:

<body ng-controller="MainCtrl">
  <test></test>
  <test></test>
</body>

测试指令的代码是

app.directive("test",function(){

return{
    restrict:"E",
    scope:{
          },
    template:"<input type='button' value='click me!' onclick='clickD()'>",
    controller:function($scope){
        clickD=function()
        {
            alert($scope.$id);
        }
    }
}
})

您也可以在此处查看示例 link

You can see the example here as well link

现在我如何分离范围.我的实际问题很笨拙,所以我把它简化到这个级别.请帮助我!!!

Now How do I separately the scopes. My actual problem is pretty clumsy so i simplified it till this level.Please help me !!!

推荐答案

你需要使用 ng-click 而不是 onclick,还要放置 clickD()$scope

You need use ng-click and not onclick, also place the clickD() function on your $scope

app.directive("test", function () {

    return {
        restrict: "E",
        scope: {},
        template: "<input type='button' value='click me!' ng-click='clickD()'>",
        controller: function ($scope) {
            $scope.clickD = function () {
                alert($scope.$id);
            }
        }
    }
})

更新的 plnkr

这篇关于如何在可重用指令中分隔按钮的范围的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆