Angular自定義指令-$ scope。$ watch不觸發

Question

我正在嘗試使用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);


        }        

    };

});

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 click事件是在“ Angular世界之外”發生的，因此將其包裝在apply中會導致摘要周期發生在click之后，然后觸發手表。

盡管如此，請不要相信我。 我是說單詞，但我真的不知道它們是什么意思。