Question

我尝试使用指令创建自己的按钮。单击按钮后应该雇用对话框（bootstrap.dialog）。但是，它不会。尝试没有点击事件，它可以工作。

使用此： - AngularJS v1.0.8 - Bootstrap 2.3.2 - Angular-bootstrap 0.3.0

这是我的指示......

.directive("ucayButton", function($dialog) {
   return {
        restrict: 'EA',
        template: '<button ng-transclude></button>',
        replace: true,
        transclude: true,
        link: function(scope, element, attrs) {
            element.addClass('btn btn-primary');
            var t = '<div class="modal-dialog">' +
                      '<div class="modal-content">' +
                        '<div class="modal-header">' +
                         '<button type="button" class="close" ng-click="close()" aria-hidden="true">&times;</button>' +
                          '<h4 class="modal-title">Modal title</h4>' +
                        '</div>' +
                        '<div class="modal-body">' +
                          '<p>One fine body&hellip;</p>' +
                        '</div>' +
                        '<div class="modal-footer">' +
                          '<button type="button" class="btn btn-default" ng-click="close()">Close</button>' +
                          '<button type="button" class="btn btn-primary" ng-click="close()">Save changes</button>' +
                        '</div>' +
                      '</div><!-- /.modal-content -->' +
                    '</div><!-- /.modal-dialog -->';

            var modalOpts = {
              backdrop: true,
              keyboard: true,
              backdropClick: true,
              template:  t,
              controller: 'dialogCtrl'
            };

            scope.openDialog = function(){
              console.log('confirmation called');  //always shown when function was called
              var d = $dialog.dialog(modalOpts);
              d.open().then(function(result){
                if(result)
                {
                  alert('dialog closed with result: ' + result);
                }
              });
            };
            angular.forEach(element, function(el) {
              el.addEventListener('click', function() {
                scope.openDialog();  // the function was hired, but the dialog didn't
              });
            });
            scope.openDialog();   //hired
        }
    };
})

Answer 1

addEventListener不是角度函数，因此当您执行影响$scope变量的代码时，您需要将这些更改恢复到摘要周期。

试试这个：

el.addEventListener('click', function() {
    if(scope.$$phase) {
        scope.openDialog();
    } else {
        scope.$apply(function() {
            scope.openDialog();
        });
    }
});

这将检查范围的$$phase，如果您在摘要周期内运行代码，则这是真实的。如果您已经处于摘要周期，则无需使用$apply调用来包装代码。如果您没有将代码包装在$apply调用中，则让angular知道它需要消化您正在进行的更改。

单击元素后无法显示角度对话框

1 个答案: