角度自定义指令-$scope$注意不要开火

Angular custom directive - $scope.$watch not firing

本文关键字：开火 scope 自定义 指令      更新时间：2023-09-26

我正在尝试制作一个下拉指令，使用Angular UI代码来获得灵感。

我可以让它在打开和关闭下拉列表的意义上工作，但我已经尝试扩展它，以便"dropdownManager"服务可以关闭页面上的所有下拉列表，并且可以使用页面控制器代码打开和关闭它。

为了做到这一点，我创建了一个名为"is open"的属性，并在上面放置了一个角度手表。不幸的是，当控制器更新属性时，或者当从指令自己的打开/关闭函数更新范围变量时，这个手表不会启动。我知道这个值在变化，因为否则下拉列表就不会打开和关闭，但手表肯定不会出现，因为我在里面有一个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);

        }        
    };
});

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

$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是在不同的范围内定义的。

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

此：

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

需要成为：

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

我认为这是因为jQuery点击事件发生在"Angular世界之外"，所以将其封装在应用程序中会导致在点击后发生摘要循环，然后触发手表。

不过，不要相信我的话。我在说文字，但我真的不知道它们是什么意思。

相关文章：