javascript - angularjs:正在监视的变量不断恢复为旧值

Question

我有一个自定义指令，可以根据主 Controller 上的变量打开该部分。如果您单击某个部分的标题(标题)，它将打开该部分并关闭其余部分。但是，当我在一个部分中有一个更新变量的按钮时，它会恢复到旧值。

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

按钮上有一个单击处理程序，但其父级上也有一个单击处理程序。当您单击按钮时，这两个事件都会触发，因此它们会相互取消

您需要防止按钮点击传播，或者需要检查父点击的事件目标。

要停止传播，请将 $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 then $apply() 只需使用 $timeout()

DEMO