如何在可重用指令中分隔按钮范围

时间:2013-08-19 15:16:01

标签: angularjs angularjs-directive angularjs-scope

我需要有一个带有几个按钮的可重用指令。但我的问题是当我尝试多次使用同一指令时,按钮绑定到一个单一的范围。 例如,请参阅以下代码:

<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

现在我如何分开范围。 我的实际问题非常笨拙所以我把它简化到这个级别。请帮帮我!!!

1 个答案:

答案 0 :(得分:2)

您需要使用ng-click而不是onclick,同时将clickD()功能放在$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);
            }
        }
    }
})

<强> updated plnkr