javascript - 将 Controller 中的参数范围函数分配给指令中的 var

Question

也许标题并不完美 - 但我会简短地解释一下:

在我的 HTML 中，我使用 ng-click 指令: (我在 HTML 代码中使用了一些带有不同参数的 ng-clicks 指令(例如“main”、“action”、“more”等)

ng-click="clickMe('main')"

我有一个 Controller 来获取id - 'main':

.controller('clickCtrl', ['$scope', function ($scope) {
    $scope.clickMe= function (id) {
        console.log("button: " + id);
    }
}]);

我想在指令链接函数中分配 $scope.clickMe 并获取传递的 id 值:

.directive('clickDir', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var click = scope.clickMe;

            click = function(id) {      //can I get the "id" here from controller also? 
                //some stuff
            }
    }}});

但它不起作用，你能帮我吗？

编辑

我的 HTML 中的一些代码:

<div class="my-navbar">
    <ul click-dir>
        <li>
            <a ng-click="clickMe('main')" href="..." class="..."></a>
        </li>
    </ul>
</div>

<div class="action-navbar">
    <ul click-dir>
        <li ng-repeat="..."> //a lot of <li> generated by ng-repeat
            <a ng-click="clickMe('actions')" href="..." class="..."></a>
        </li>
    </ul>
</div>

<div class="search-navbar">
    <ul click-dir>
        <li ng-repeat="..."> //a lot of <li> generated by ng-repeat
            <a ng-click="clickMe('search')" href="..." class="..."></a>
        </li>
    </ul>
</div>

我想从 click-dir 指令中的 ng-click 获取 id 参数，因为我想进行一些 DOM 操作。

Answer 1

如果您只想处理指令中的点击事件，那么您可以直接执行此操作，而无需使用ng-click。像这样的事情:

link: function (scope, element, attrs) {
    // get "id" from attrs or declare it in your directive config in scope
    element.on('click', function() {
        // use "id" here...
    });
}

如果“id”参数是一个简单的字符串，您可以这样做:

scope: {
    clickDir: '@'
},
link: function (scope, element, attrs) {
    element.on('click', function() {
        // use scope.clickDir here...
    });
}

HTML 将简单地变成:

<a click-dir='main'>...</a>

(再次假设您实际上不需要组合 Controller /外部作用域和指令，除了从 HTML 传递常量“id”值之外。)