在控制器和指令之間共享$ scope值

我有一個指令，用於切換我使用ng-show的DIV。現在當DIV在5秒後可見時，我希望它淡出。 ng-show在我的控制器（$scope.showPopover）中使用$scope變量進行切換，它是一個布爾值，它是true或false。這是我的HTML代碼：

Hello World，我很滿足，但會在5秒後去！

你會發現自定義指令是對兒童的div在我的指令，當我試圖使用它返回由ng-if生產的註釋的元素。這是我的指令

.directive('fadeAnimation', function ($animate) { 
     'use strict'; 
     return{ 
      restrict: 'A', 
      priority: 800, 
      link: function (scope, element) { 

       scope.$watch('showPopover', function (newValue) { 

        console.log(scope.showPopover); // same as scope.showPopover in the controller 

        if (newValue === true) {  
         $animate.addClass(element[0].parentNode, 'fade-animiate').then(function() { 
          $animate.removeClass(element[0].parentNode, 'fade-animiate'); 
          //scope.showPopover = false; 
          // scope.$apply(); // this produces Error: [$rootScope:inprog] $digest already in progress 
         }); 

        } else if (newValue === false) { 
         //scope.showPopover = false; 
         // scope.$apply(); // this produces Error: [$rootScope:inprog] $digest already in progress 
        } 

       }); 
      } 
     }; 
    });

正如你所看到的，我向父元素中添加和刪除一個CSS類（帶動畫）。完成此操作後，我想將控制器中的scope.showPopover布爾值設置爲false，因爲這樣可以防止我必須雙擊切換彈出窗口的原始鏈接（因爲它是false，我們切換爲true，動畫隱藏但DIV但scope.showPopover或$scope.showPopover仍然如此）。我試過在我的指令中設置了scope.showPopover = false，但是這在控制器中沒有更新。當我嘗試強制一個作用域時。$ apply（）;我的控制檯出現錯誤，提示Error: [$rootScope:inprog] $digest already in progress。我究竟做錯了什麼？

我試圖在承諾設置此之後我刪除的CSS類，當我取消scope.showPopover = false（在newValue === true條件）的手錶並沒有看到這種變化，手錶打破了我下次切換的$scope.showPopover風景。似乎沒有任何工作，我認爲我的做法是錯誤的！有任何想法嗎？提前謝謝了！

來源

2015-03-02 Mike Sav

結合你的代碼來看，似乎您使用的是共享範圍，有一個問題當您使用「showPopover」原語而不是「。」之後，我相信您將成爲原型繼承問題的受害者。使用對象的規則（即「vm.showPopover」）。 – acg 2015-03-02 19:36:44

另一種解決方案是，如果「彈出窗口」具有隔離範圍，則需要通過屬性將基元對象傳遞到指令中。 – acg 2015-03-02 19:43:30

不知道它符合您的要求，我用動畫掛鉤觸發褪色：

的Javascript

app.directive('fadeAnimation', function ($timeout) { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attr) { 
     element.addClass('fade-animation'); 
     scope.$watch(attr.ngShow, function (value) { 
      if(value){ 
       $timeout(function(){ scope.showPopover = false; },5000); 
      } 
     }); 
     } 
    }; 
})

CSS：

.fade-animation.ng-hide-add.ng-hide-add-active, 
.fade-animation.ng-hide-remove.ng-hide-remove-active { 
    -webkit-transition: all linear 1s; 
    transition: all linear 1s; 
} 

.fade-animation { 
    opacity: 1; 
} 

.fade-animation.ng-hide { 
    opacity: 0; 
}

DEMO

來源

2015-03-02 20:06:20 MamaWalter

你應該嘗試使用2路在你的指令

HTML

<div ng-show="showPopover" class="popover" fade-animation show-popover="showPopover">Hello World, I am content but will go after 5 seconds!</div>

DIRECTIVE

app.directive('fadeAnimation', function() { 
    return { 
     restrict: 'A', 
     scope: { 
     showPopover: "=" 
     }, 
     link: function(scope, element, attr) { 
     element.addClass('fade-animation'); 
     scope.$watch("showPopover", function(value) { 
      if(value){ 
      //you should be able to flip the boolean here and see it in the controller     
      } 
     }); 
     } 
    }; 
});

來源

2015-03-02 22:24:57 ruedamanuel

在控制器和指令之間共享$ scope值

回答

相關問題