如何单独的按钮的范围可重复使用的指令内 [英] How to separate scopes of buttons inside a reusable directive

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

问题描述

我需要有几个可重复使用的指令buttons.But我的问题是,当我尝试在同一指令多次按键结合使用一个单一的范围。
例如看到下面的code:

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>

code测试指令是

Code for test directive is

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

您可以在这里看到的例子以及

You can see the example here as well link

现在如何单独的作用域。
我实际的问题是pretty笨拙,所以我简化它,直到这个level.Please帮我!

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

推荐答案

您需要使用 NG-点击,而不是的onclick ,也请将 clickD()功能在 $范围

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

updated plnkr

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

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