将带有参数的范围函数从控制器分配给指令中的 var

Question

也许标题并不完美 - 但我很快就会解释：

在我的 HTML 中，我使用 ng-click 指令：（我在我的 HTML 代码中使用了几个 ng-clicks 指令和不同的参数（比如 'main'、'action'、'more' 等）

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

我有一个控制器可以获取 id - 'main':

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

我想在我的指令 link 函数中分配 $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>

（同样，假设除了从 HTML 传递常量 "id" 值外，您实际上不需要组合 controller/outer 作用域和指令。）

Answer 2

您可以使用 & angular 绑定，它允许指令的隔离范围将值传递到父范围，以便在属性中定义的表达式中进行评估，在我们的示例中，我们定义了 click 属性。

所以你可以将你的函数定义到你的控制器中，并将她绑定到你的指令。

控制器

(function(){

function Controller($scope) {

  $scope.click = function(id){
    console.log('button : ' + id)
  }


}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

指令

(function(){

  function clickDir() {
    return {
        restrict: "A",
        scope: {
          //Use '&' binding to evaluate expression
          click: '&'
        },
        link: function(scope, element, attr){
          //Listen for click event
          element.on('click', function(){
            //Call click controller function
            scope.click();
          });
        }
    };
  }

angular
  .module('app')
  .directive('clickDir', clickDir);


})();

HTML

  <body ng-app="app" ng-controller="ctrl">

    <button type="button" click-dir click="click('tata')">button</button>
    <button type="button" click-dir click="click('toto')">button2</button>
    <button type="button" click-dir click="click('titi')">button3</button>


  </body>

将带有参数的范围函数从控制器分配给指令中的 var

Assign scope function with param from controller to var in directive

javascript

scope

directive

angularjs