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);
    }
}]);

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

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

Answer 1

如果您只想处理指令中的click事件，则可以直接执行，而不使用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”值。）

Answer 2

您可以使用＆amp; 角度绑定，它允许指令的隔离范围将值传递到父范围，以便在属性中定义的表达式中进行评估，在我们的示例中我们定义点击属性。

因此，您可以将您的功能定义到Controller中，并将其绑定到您的指令。

<强>控制器

(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>

使用param从控制器到var in指令分配范围函数

2 个答案: