Question

我有角度智能表的指令，用于向下表所示的行添加复选框选项。我希望能够在单击复选框时执行自定义功能。这可能吗？当单击复选框时，我基本上需要存储行的rowid或其他属性。

app.directive('csSelect', function () {
    return {
        require: '^stTable',
        template: '<input type="checkbox"/>',
        scope: {
            row: '=csSelect'
        },
        link: function (scope, element, attr, ctrl) {

            element.bind('change', function (evt) {
                scope.$apply(function () {
                    ctrl.select(scope.row, 'multiple');
                });
            });

            scope.$watch('row.isSelected', function (newValue, oldValue) {
                if (newValue === true) {
                    element.parent().addClass('st-selected');
                } else {
                    element.parent().removeClass('st-selected');
                }
            });
        }
    };
});

修改

该指令的使用方式如下：

<td cs-select="row"></td>

请注意，如果我添加ng-click到td元素以检查单击的行，那么我是否单击该复选框并不重要。只要我点击td元素内的任何地方，它就像我点击该行一样。所以这不是一个解决方案

Answer 1

app.directive('csSelect', function () {
    return {
        require: '^stTable',
        template: '<input type="checkbox"/>',
        scope: {
            row: '=csSelect',
            myFunc: '&cs-func'
        },
        link: function (scope, element, attr, ctrl) {

            element.bind('change', function (evt) {
                scope.$apply(function () {
                    ctrl.select(scope.row, 'multiple');
                });
            });

            scope.$watch('row.isSelected', function (newValue, oldValue) {
                if (newValue === true) {
                    element.parent().addClass('st-selected');
                    scope.myFunc();
                } else {
                    element.parent().removeClass('st-selected');
                }
            });
        }
    };
});

然后

<td cs-select="row" cs-func='alert("hello")'></td>

Answer 2

将ng-click添加到指令模板。

template: "<input type='checkbox' ng-click='myFunc()'/>"

在指令的链接/控制器中：

scope.myFunc = function() { //Code };

Answer 3

尝试：

ng-click="controller.function()"

Answer 4

您可以通过将函数添加到注入scope函数的link参数中，将函数公开给指令中的模板html。

您可以将此用作更改处理程序，并且可以使用ngClass来评估是否将css类附加到您的输入。

尝试以下几点：

return {
  // ...,
  template: '<input ng-change="changeHandler()" ng-class="{'st-selected': row.isSelected}">',
  link: function (scope, elem, attrs, parentCtrl) {
    scope.changeHandler = function () {
      // parentCtrl.whatever(scope.row);
    };
  }
};

您输入的一件事是ngModel。我不确定你的stTable指令中发生了什么，但你可以并且可能应该将你的checkbox指令绑定到模型。想到row.isSelected。

如何在angularjs指令中执行自定义函数？

4 个答案: