angularjs：被監視的變量保持還原爲舊值

Question

我有一個自定義指令，它基於主控制器上的一個變量打開部分。如果您點擊某個部分的標題（標題），則會打開它並關閉其餘部分。但是當我在一個部分中有一個更新變量的按鈕時，它會恢復到舊值。

app.directive('sliders', function() { 
     return { 
      restrict: 'E', 
      transclude: true, 
      scope: {}, 
      controller: function ($scope) { 
       $scope.sliders = []; 
       this.addSlider = function (section, element) { 
        $scope.sliders.push(section); 
       }; 
       this.select = function (section) { 
        console.log(' select ' + $scope.$parent.stepToShow); 
        $scope.$parent.stepToShow = section.step; 
       }; 
      }, 
      template: '<div class="sliders" ng-transclude></div>' 
     }; 
    }) 
    .directive('sliderSection', function() { 

     return { 
      restrict: 'E', 
      require: '^sliders', 
      transclude: true, 
      scope: { 
       title: '@', 
       step: '@' 
      }, 
      link: function (scope, element, attrs, slidersCtrl) { 
       scope.selected = function() { 
        return scope.step == scope.$parent.$parent.stepToShow; 
       }; 
       scope.select = function() { 
        console.log('select() ' + scope.step); 
        slidersCtrl.select(scope); 
       }; 
       slidersCtrl.addSlider(scope); 
       scope.$watch(function() { return scope.$parent.$parent.stepToShow; }, function (newVal, oldVal) { 
        console.log(' watch ' + scope.$parent.$parent.stepToShow); 
        if (newVal == scope.step) { 
         element.find('.slider-body').slideDown(); 
        } 
        else { 
         element.find('.slider-body').slideUp(); 
        } 
       }); 
      }, 
      template: '<div id="" class="slider-section" step="{{step}}" ng-click="select()">' + 
          '<div class="slider-header" >{{title}}</div>' + 
          '<div class="slider-body" ng-transclude></div>' +  
         '<div>' 
     }; 
    }); 

它的更好，如果我告訴你，通過plunkr

http://plnkr.co/edit/aFMkWYmINb26M8cJFzgl?p=preview

Answer 1

你有一個點擊處理程序上的按鈕，但也有它的父母click處理爲好。當您單擊按鈕時，兩個事件都會觸發，因此它們會取消對方

您需要防止傳播中的按鈕點擊，或者您需要檢查父點擊上的事件目標。

要停止$event到ng-click處理程序的傳播傳遞。

<button ng-click="setStepToShow('1', $event)">Next Step</button> 

然後在處理程序代碼：

$scope.setStepToShow = function (step, $event) { 
     $event.stopPropagation() 
     /* other code as original */ 
    } 

而不是使用if...$$phase的那麼$apply()只是使用$timeout()

DEMO