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

我尝试使用伪指令创建自己的按钮。点击按钮后，应该雇用对话框（bootstrap.dialog）。但是，它不会。尝试没有点击事件，它的作品。单击元素后无法显示角度对话框

使用此： - AngularJS v1.0.8 - 引导2.3.2 - 角引导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 
     } 
    }; 
})

来源

2013-10-03 user2842277

请发表小提琴或Plunker来帮助我们检测到问题。谢谢 –

以前感谢。但它已经解决了。^_^ – user2842277

addEventListener不是一个角功能，因此当您执行影响$scope变量的代码时，您需要将这些更改回到摘要循环中。

试试这个：

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

这将检查范围，如果你是从消化周期内运行的代码是truthy的$$phase。如果您已经处于摘要循环中，则不需要使用$apply呼叫包装代码。如果您没有在$apply调用中包装代码，让角度知道它需要消化正在进行的更改。

来源

2013-10-03 11:21:15

谢谢，皮特。我已经救了我的一天。而且，得到了启发，如何使用$$阶段和$ apply。非常感谢。^_^ – user2842277

快乐。有更多更深入的消化周期和范围继承[这里]（http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs）。如果能解决您的问题，请将答案标记为正确。 :) –

这是一个很好的答案。它应该在角度的文档^ _ ^ – user2842277

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

回答

相关问题