Angularjs指令创建点击事件

Question

我有简单的指令，像这样：

angular.module('docsTemplateUrlDirective', []) 
    .controller('Controller', ['$scope', function($scope) { 
     $scope.customer = { 
     name: 'Naomi', 
     address: '1600 Amphitheatre' 
     }; 

$scope.clicke = function(){ 
alert('test'); 
}; 

    }]) 
    .directive('myCustomer', function() { 
     return { 
     templateUrl: 'my-customer.html' 
     }; 
    }); 

的index.html

<div ng-controller="Controller"> 
    <div my-customer click-event='clicke()'></div> 
</div> 

我-customer.html

Name: {{customer.name}} Address: {{customer.address}} 
<button>click</button> 

，我想创建点击按钮的事件，然后在我的控制器 中使用此事件。 但我不知道该怎么做。 帮我看看。非常感谢。

Answer 1

我会建议使用的东西Angular已经给你：ng-click。

这里有一个JSBin的例子，我为你所做的：

<div ng-controller="Controller"> 
    <div my-customer ng-click='clicke()'></div> 
</div> 

如果你点击了该指令，它应该是这样的：

Answer 2

您可以使用ng-repeat遍历一组客户，然后让您的ng-click函数获取与客户（阵列中的索引）相关的参数...

<div ng-repeat="customer customers track by $index" ng-click="myClickHandler(index)"> 
    {{customer}} 
</div> 

Answer 3

我会建议以下解决方案。工作示例可以在这里找到 - @sumit Plunker
下面是一个代码示例：

angular.module('docsTemplateUrlDirective', []) 
    .controller('Controller', ['$scope', function($scope) { 
    $scope.customer = { 
     name: 'Naomi', 
     address: '1600 Amphitheatre' 
    }; 

    $scope.clicke = function(evt) { 
     alert('test'); 
    }; 

    }]) 
    .directive('myCustomer', function($parse) { 
    return { 
     restrict: 'A', 
     scope: true, 
     templateUrl: 'my-customer.html' 
    } 
    }) 
    .directive('clickEvent', function($parse) { 
    return { 
     restrict: 'A', 
     scope: true, 
     link: function(scope, el, attrs) { 
     var expressionHandler = $parse(attrs.clickEvent) 
     el.find('#btnSubmit').on('click', function(e) { 
      expressionHandler(scope); 
     }) 
     } 
    } 
    });