AngularJS指令上的ng-click属性

一尘不染

AngularJS指令上的ng-click属性

angularjs

我认为开箱即用的指令上使用众所周知的角度属性应该很容易。

例如，如果我的指令名称是myDirective，我想以这种方式使用它：

<div ng-controller="myController">
   <my-directive ng-click="doSomething()"><my-directive>
</div>

无需像下面的示例一样定义自定义点击属性（onClick）

<div ng-controller="myController">
   <my-directive on-click="doSomething()"><my-directive>
</div>

似乎ng-click可以工作，但是您也需要在指令标签上也指定ng-controller，这也是我所不希望的。我想在周围的div上定义控制器

是否可以在指令上使用ng-click以及在父html元素上定义的控制器？

阅读 246

2020-07-04

共1个答案

一尘不染

这是更新的代码。也许这就是您想要的。

HTML：

<div data-ng-app="myApp">
    <div data-ng-controller="MyController">
        <my-directive data-ng-click="myFirstFunction('Hallo')"></my-directive>
        <my-directive data-ng-click="mySecondFunction('Hi')"></my-directive>
    </div>
</div>

角度：

var app = angular.module('myApp', []);

app.directive('myDirective', function(){
    return {
        restrict: 'EA',
        replace: true,
        scope: {
            eventHandler: '&ngClick'
        },
        template: '<div id="holder"><button data-ng-click="eventHandler()">Call own function</button></div>'
    };
});

app.controller('MyController', ['$scope', function($scope) {
    $scope.myFirstFunction = function(msg) {
         alert(msg + '!!! first function call!');   
    };
    $scope.mySecondFunction = function(msg) {
         alert(msg + '!!! second function call!');   
    };
}]);

编辑

检查我在jsFiddler中提出的解决方案是您要寻找的是什么？

http://jsfiddle.net/migontech/3QRDt/1/

2020-07-04