javascript - 将元素传递给 Angular 指令

Question

我有一个类似于 https://github.com/angular-ui/bootstrap/blob/master/src/modal/modal.js的简单弹出指令

我需要将弹出窗口靠近启动打开的元素。

做这个的最好方法是什么？会用 ng-click="open($event)" 捕获发起者并传递给指令工作吗？（这里是这个元素的样本捕获http://jsfiddle.net/Amnesiac/5z5Qz/3/）

$scope.open= function (e) {
   var elem = angular.element(e.srcElement);
}

然后如何将此 angular.element(e.srcElement) 传递给指令？（然后指令将根据传递的 dom 元素的位置进行一些计算并重新定位弹出窗口）

Answer 1

像传递任何其他范围属性一样传递它，例如modal el="clickedElement"：

<button id="myId" ng-class="{'blueBg': blueBg}" ng-click="hi($event)">click me</button> 
<div modal el="clickedElement"></div>

angular.module('Test',[])
.controller('Foo', function ($scope, $element) {
    $scope.blueBg = false;
    $scope.hi = function (ev) {
       $scope.blueBg = true;
       $scope.clickedElement = angular.element(ev.srcElement);
    }
})
.directive('modal', function() {
    return {
        link: function(scope, element, attrs) {
            scope.$watch(attrs.el, function(value) {
                if(value !== undefined) {
                    console.log('element=',value);
...

fiddle