Question

我是AngularJS的新手，需要一些帮助。我有两个指令（父和子）。当我单击一个链接时，父指令将触发子指令正在侦听的广播事件。主要是我无法让广播监听器在被触发时捕获广播事件。到目前为止，这是我的代码：

<div all-checkboxes-broadcast>
   <a href="" ng-click="checkAll()">Select All</a>
   <a href="" ng-click="clearAll()">Clear All</a>
   <div all-checkboxes-listeners>
      <input type="checkbox" />
   </div>
</div>

AllCheckboxesBroadcast.js

"use strict";

app.directive('allCheckboxesBroadcast', function () {
    return {
        restrict: 'A',
        controller: ['$scope',
            function($scope) {
                //select all checkboxes
                $scope.checkAll = function () {
                    $scope.$broadcast('allCheckboxes',true);
                };

                //de-select all checkboxes
                $scope.clearAll = function () {
                    $scope.$broadcast('allCheckboxes',false);
                };
            }
        ]
    }
})

AllCheckboxesListener.js

"use strict";

app.directive('allCheckboxesListener', function () {
    return {
        restrict: 'A',
        require: '^allCheckboxesBroadcast',
        link: function() {
            if ($scope.$on('allCheckboxes') == true) {
                angular.forEach(element.find('input[type=checkbox]'), function(){ 
                    this.prop('checked',true);
                }); 
            }
        }
    }
})

Answer 1

好的一些事情......指令名称必须与驼峰版本匹配，即＆＃34; allCheckboxesListeners＆＃34;在你的情况下。你有一个＆＃34; s＆＃34;最后一个没有。关于范围，除非您另行指定，否则另一个指令将自动获得相同的范围。因此，只需将其作为参数添加到link函数中，它就是可用的父作用域。使用角度时我也不会使用find()。相反，我会将这些复选框绑定到某些对象数组，因此您不必操纵DOM！除非您同时使用jQuery的完整版本，否则您只能使用jqLite中的标记名称进行搜索，除非您单独添加jQuery（例如，您仅限于搜索）例如input。

请参阅此处的示例： http://plnkr.co/edit/0n1NVpAl2u8PYyPd6ygL?p=preview

<强>的JavaScript

angular.module('appExample', [])
.directive('allCheckboxesBroadcast', function() {
    return {
        restrict: 'A',
        controller: function($scope) {
            $scope.checkAll = function () {
            console.log('checkAll');
            $scope.$broadcast('allCheckboxes', true);
        }
        //de-select all checkboxes
        $scope.clearAll = function () {
            console.log('clearAll');
            $scope.$broadcast('allCheckboxes', false);
        };
    }
};
})  
.directive('allCheckboxesListeners', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            scope.$on('allCheckboxes', function(event, shouldCheckAllCheckboxes) {
                console.log(shouldCheckAllCheckboxes);
                element.find('input').prop('checked', shouldCheckAllCheckboxes);
            });
        }
    };
});

<强> HTML

<body ng-app="appExample">
  <div all-checkboxes-broadcast>
    <a href="" ng-click="checkAll()">Select All</a>
    <a href="" ng-click="clearAll()">Clear All</a>

    <div all-checkboxes-listeners>
      <input type="checkbox" />
    </div>
  </div>
</body>

在子指令中监听广播

1 个答案: