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