Question

在我的HTML中，我有类似的东西

<div class="form-group small-spacer" ng-repeat="bar in ctrl.foo.bars track by $index">
    //irrelevant stuff deleted
    <div class="col-md-1 col-xs-3">
        <btn class="btn btn-block" double-click="ctrl.removeBar($index)" double-click-class="btn-warning btn-danger">X</btn>
    </div>
</div>

我有一个简单的指令，其目的是确保用户在做任何皮疹之前点击两次。

function doubleClick($document) {
    return {
        restrict: 'A',
        scope: {
            doubleClick: '&'
        },
        link: function($scope, elem, attr) {
            var classes = attr.doubleClickClass.split(' ');
            var warningClass = classes[0], dangerClass = classes[1];

            //used to ensure user clicks twice
            var bIsTargeted = false;

            //add the inital warning class
            elem.addClass(warningClass);

            var checkClick = function(event){
                if(!elem[0].contains(event.target)){
                    if (bIsTargeted){
                        elem.removeClass(dangerClass);
                        elem.addClass(warningClass); 
                    }
                    bIsTargeted = false;
                }else{
                    if (bIsTargeted){
                        $scope.doubleClick();
                    }else{
                        elem.removeClass(warningClass);
                        elem.addClass(dangerClass); 
                    }

                    bIsTargeted = !bIsTargeted;
                }
            }

            $document.on('click', checkClick);

            $scope.$on('$destroy', function() {
                console.log('DESTROY!');
                $document.off('click', checkClick);
            });
        }
    };
}

在我的ctrl.removeBar函数中：

this.removeBar = function(index){
    console.log('deleted' + index)
    vm.foo.bars.splice(index, 1);
    console.log(vm.foo.bars);
}

当我单击双击btn两次时，ctrl.removeBar中的“已删除”日志显示，第二个日志确认条形对象是从bars数组拼接而来。但是，DOM大部分时间都不会更新，大约有四分之一的时间，它会在5秒后更新。在它没有更新的情况下，似乎范围没有被销毁，因为$ scope.on（'$ destroy'）没有“DESTROYED”日志。我尝试在按钮上添加ng-click，如下所示：

<btn class="btn btn-block" ng-click="ctrl.removeBar($index)" double-click="ctrl.removeBar($index)" double-click-class="btn-warning btn-danger">X</btn>

在这种情况下，DOM会在100％的时间内立即修改，同样也会针对“DESTROYED”日志进行修改。这让我觉得从指令调用函数时我一定搞砸了。我做错了什么想法？

Answer 1

您的点击处理程序在对AngularJS模型进行更改后需要执行$scope.$apply()，以便框架知道更新DOM。

有关更多信息，请参阅AngularJS $rootScope API Reference -- $apply。

在内部指令

1 个答案: