Question

我在Angular 1中创建了代表复选框的组件。我希望在检查后添加一个事件来调用一些动作（来自控制器）。这是我的代码：

threeListsApp.component("checkbox",
{
    template: '<div ng-if="!checked" ng-click="check()" ng-model="checked"></div>' +
        '<div ng-if="checked" ng-click="check()" ng- model="checked"><i class="fa fa-check"></i></div>',
    controller: function checkBoxController($scope) {
        $scope.checked = false;
        $scope.check = function () {
            $scope.checked = !$scope.checked;
            if ($scope.checked) {
                //CALL SOME ACTION
            }
        }
    }
});

我想使用这样的内容：<checkbox checkedEvent="{{controllerAction()}}"></checkbox>

如何向组件添加事件？感谢您的建议

Answer 1

我不确定我是否明白这个问题。如果您需要在点击时触发事件，则只需将$rootScope.$emit或$rootScope.$broadcast添加到ng-click功能。

如果您需要收听某个事件，可以在控制器中使用$scope.$on侦听器。但是在这种情况下，最好在控制器中使用pub-sub模式而不是硬编码监听器。

$rootScope documentation about events

Angular pubSub design advices

Answer 2

这是我的解决方案（我使用指令）：

threeListsApp.directive('checkbox', function ($rootScope) {
    return {
        restrict: 'E',
        template: '<div><div ng-if="!checked" ng-click="check()" ng-model="checked"></div>' +
        '<div ng-if="checked" ng-click="check()" ng- model="checked"><i class="fa fa-check"></i></div></div>',
        replace: true,

        link: function (scope, element, attrs, model) {
            scope.checked = false;

            scope.check = function () {
                scope.checked = !scope.checked;
                if (scope.checked) {
                    var id = attrs.checked.substring(attrs.checked.lastIndexOf("(") + 1, attrs.checked.lastIndexOf(")"));
                    var method = attrs.checked.substring(0, attrs.checked.lastIndexOf("("));
                    $rootScope[method](id);
                }
            }
        }
    }; });

使用：

<checkbox checked="controllerMethod({{item.ID}})"></checkbox>

Answer 3

您可以发送一个事件，并在代码中的任何位置发送事件，而不是调用控制器的方法。

在你的指令中：

$scope.$emit('myCheckboxIsChecked')

控制器中的任何地方：

$scope.$on('myCheckboxIsChecked', function(){
    // in your controller, execute your code here
});

如果您有任何问题，可以尝试使用$ rootScope而不是$ scope，它不太干净但是可行...并查看此页面Screenshot $ rootScope.Scope

Angular - 具有事件属性的组件

3 个答案: