Question

我尝试使用Angular UI代码制作下拉指令。

我可以通过打开和关闭下拉列表的方式使其工作，但我已尝试对其进行扩展，以便＆＃34; dropdownManager＆＃34; service可以关闭页面上的所有下拉菜单，以便可以使用页面控制器代码打开和关闭它。

为此，我创建了一个名为＆＃34; is-open＆＃34;的属性。并在上面放一个有角度的手表。不幸的是，当控制器更新属性时，或者当指令自己的打开/关闭功能更新范围变量时，此表不会触发。我知道价值正在发生变化，因为否则下拉列表不会打开和关闭，但手表绝对不会因为我内部有一个console.log而无法使用。

奇怪的是，它首次初始化时会对页面上的每个下拉列表触发一次因为console.log被写入了！

无论如何，我试图做一个小提琴，但有太多的依赖，对不起，但我已设法尽可能地减少代码，所以希望一个经验丰富的Angular用户应该很容易理解。

angular.module('directives').directive('dropdown', function () {

    return {

        restrict: 'EA',
        scope: {
            isOpen: '=?',
        },

        link: function ($scope, $element, $attrs, ngModel) {


            // Defaults
            $scope.isOpen = false;

            // Watch the isOpen variable
            $scope.$watch('isOpen', function(value) {

                console.log("Scope Changed", $scope.isOpen);

                // Open or close this panel
                if (value === true){
                    $scope.openDropdown();
                }
                else{
                    $scope.closeDropdown();
                }

            });            


            // Open Dropdown
            $scope.openDropdown = function($event){

                $scope.isOpen = true;

                var panelEl = $element.find('[dropdown-panel]');

                panelEl.slideDown(100, function(){
                    $element.addClass('is-open');
                });

            };



            // Open Dropdown
            $scope.closeDropdown = function($event){

                $scope.isOpen = false;

                var panelEl = $element.find('[dropdown-panel]');

                $element.removeClass('is-open');

                panelEl.slideUp(100);

            };


            // Toggle Dropdown
            $scope.toggleDropdown = function ($event) {

                if(!$scope.isOpen){
                    $scope.openDropdown();
                }

                else{
                    $scope.closeDropdown();
                }

            };


            // Add click event to toggle element
            $element.find('[dropdown-toggle]').bind('click', $scope.toggleDropdown);


        }        

    };

});

Answer 1

一次关闭并打开所有下拉列表的一个好方法是使用事件：

$scope.$on('close all modals', function(){
  $scope.isOpen = false;
})

$scope.$on('open all modals', function(){
  $scope.isOpen = true;
})

然后当您要关闭所有内容时，无论您在代码中的哪个位置都可以调用：

$rootScope.$broadcast('close all modals');

您的手表被调用一次的原因可能是因为isOpen从undefined更改为false。我认为你的问题是isOpen是在不同的范围内定义的。

Answer 2

好的，所以我最终找到了答案。

此：

$element.find('[dropdown-toggle]').bind('click', $scope.toggleDropdown);

需要成为：

$element.find('[dropdown-toggle]').bind('click', function(){
    $scope.$apply($scope.toggleDropdown);
});

我认为这是因为jQuery点击事件发生在“Angular世界之外”，因此将其包装在一个apply中会导致摘要周期发生在点击之后，然后点击该表。

尽管如此，请不要接受我的任何言论。我说的是话，但我真的不知道他们的意思。

Angular自定义指令 - $ scope。$ watch not firing

2 个答案: