标签: ng-dialog

我正在使用ngDialog在弹出窗口中工作.这是一些代码:

<style>
    .ngdialog.dialogforpopup .ngdialog-content
    {
        width : 1100px;
        margin-top:-100px;
        padding-top:10px;
    }
</style>

模板

<div style="height:800px;width:1040px;padding-left:5px;padding-top:5px;
     padding-right:5px"

</div>
<div class="ngdialog-buttons" style="margin-top:10px">
          <button type="button" class="ngdialog-button ngdialog-button-primary" 
          ng-click="cancel()">Cancel</button>
          <button type="button" class="ngdialog-button ngdialog-button-primary" 
          ng-click="save()">Save</button>
</div>

指示

ngDialog.open({
      template: 'editor.html',
      controller: 'editorController',
      className: 'ngdialog-theme-default dialogforpopup',
      closeByDocument: false,
      disableAnimation: true
      });

我有两个问题.如何将我的弹出窗口放在屏幕上？目前我正在使用margin-top:-100px; 是否可以自动调整ngDialog的内容？

谢谢

我需要打开多个具有相同ID的ngDialog,单击关闭按钮时,它应该只关闭当前打开的ngDialog.

为了关闭ngDialog,我需要调用一个收集数据然后关闭ngDialog的事件.

在ngDialog(https://github.com/likeastore/ngDialog)上,是否有内置的方法从模板中自行关闭对话框？即所以我在调用对话框的控制器中不需要任何功能？

这是我的模板(errorPopup.html):

<div>
  <div class="alert alert-warning">
    <div class="errorLogo"><i class="icon-exclaim"></i></div>
    <div class="errorContent" data-ng-bind-html="errorMessage"></div>
  </div>
  <div class="buttonWrapper">
    <button type="button" class="btn-primary pull-right">
      <span res="close"></span>
    </button>
  </div>
</div>

这就是我打开对话框的方式:

function showErrorPopup() {
  ngDialog.open({
    template: 'errorPopup.html',
    scope: $scope,
    className: 'ngdialog-theme-default ngdialog-cart-theme',
    showClose: true,
    appendTo: 'div[ui-view]',
    closeByDocument: false
  });
}

因此,当我调用showErrorPopup()时,我会显示一个对话框,但是,我需要使用此"关闭"按钮来实际关闭/关闭弹出窗口.截至目前,这只是一个没有做任何事情的计划按钮.

我可以做一些模板级别(不更改我的控制器代码)来使按钮工作吗？

也许我应该使用默认按钮而不是我自己的？如果是这样,怎么样？

PS:我注意到点击右上方的X按钮有效,弹出窗口被解除.

谢谢大家!

我必须在弹出窗口中显示 jwplayer，对于弹出窗口我使用 ngDialog(angular)，ngDialog 的代码如下：

$scope.showVideoPlayerPopup = function(video_path)
{
    $scope.ngDialog = ngDialog;
            ngDialog.open({
                animation: true,
                scope:$scope,
                template:'<div id="video_popup"></div>',
                plain: true,
                //className: 'ngdialog-theme-default',
                closeByDocument: true
                //backdrop : 'static'
            });
        playVideo(video_path);
}

上面调用的播放视频函数包含jwplayer的代码，如下：

<script>
    function playVideo(video_path)
    {
        jwplayer("video_popup").setup({
            file: video_path,
            width: "600px",
            height: "600px",
            stretching: "bestfit",
        });
    }

</script>

当我对没有弹出窗口的简单 html 代码使用相同的 jwplayer 代码时，它工作正常，但我尝试将我的 html 放入弹出窗口中，它给了我以下错误：

错误：jwplayer(...).setup 不是函数

更新

我包含的文件：

<script src="https://content.jwplatform.com/libraries/qAkRysIB.js"></script>

使用AngularJS,我想从a里面访问范围变量<script type="text/ng-template".

<script type="text/ng-template" id="firstDialogId">
    <div class="ngdialog-message" align="center" id="download">
        <h4 ng-show=isFrench>Télécharger la cartographie</h4>
        <h4 ng-show=isEnglish>Download cartography</h4>
        <a href="../downloads/PDF/{{currentLanguage}}/{{currentCartography}}.pdf" download>
            <img  src="../style/images/pdf-icon.png" alt="Download PDF" width="30%" height="30%">
        </a>   
        <a href="../downloads/VSD/{{currentCartography}}.vsd" download>
            <img border="0" src="../style/images/vsd-icon.png" alt="Download VSD" width="30%" height="30%">
        </a>   
        <a href="../downloads/PNG/{{currentLanguage}}/{{currentCartography}}.png" download>
            <img border="0" src="../style/images/PNG-icon.png" alt="Download PNG" width="30%" height="30%">
        </a>   

         <div class="ngdialog-buttons">
             <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="closeThisDialog('button')">Close</button>
         </div>
    </div>
</script>

isFrench并且isEnglish是来自我的控制器的2个布尔值.

相同的currentCartography和currentLanguage,它们是我的控制器的字符串.

我也尝试了控制器内外的getter,结果相同.

我在控制器指令中有这个电话

ngDialog.openConfirm({
        template          : '<form-directive></form-directive>',
        plain             : true,
        closeByNavigation : true,
        scope             : $scope
      })
      .then(function( response ) {
          $log('SENDED');
  });

零件

ngDialog.openConfirm({
        template          : '<form-component></form-component>',
        plain             : true,
        closeByNavigation : true,
        scope             : $scope
      })
      .then(function( response ) {
          $log('SENDED');
      });

两者的HTML

<form ng-submit="alert("Hello !!!")">
   <button type="submit">Send</button>
</form>

当我单击Button on指令时,我在控制台上看到SENDED消息,但是对于组件看起来像忽略每个NG属性,点击按钮什么都不做,但正确加载模板.

相同的模板,相同的一切,完全相同,所以也许是一个ngDialog类组件的错误吗？

我只是希望ng-attributes在里面工作,如果我点击按钮提交然后关闭对话框并获得promise日志消息

检查Plunkr示例

如果我使用范围,指令也会失败:其中的{obj:'='}属性组件忽略了所有内容.

我认为是Scopes的某种问题 - 指令中的范围声明(或组件中的绑定) - 以及openDialog对象中的范围

您好我安装了以下模块https://github.com/likeastore/ngDialog

它工作得很好,但我不知道如何从控制器打开对话框,我这样做:

var app = angular.module('app', ['ngRoute','ngAnimate','ngSanitize','ngDialog']);

app.controller('SignupController', function($rootScope,$scope) {
    $scope.signup = function(){
        var error = false,
        error_list = "ERRORS";

        if(!$scope.signup_username){
            error = true;
            error_list += "\n\n Username \n " + $rootScope.errors.required_field;
        }if(!$scope.signup_email){
            error = true;
            error_list += "\n\n Email \n " + $rootScope.errors.valid_email;
        }if(!$scope.signup_password){
            error = true;
            error_list += "\n\n Password \n " + $rootScope.errors.required_field;
        }

        if(error){
            ngDialog.open({template:error_list,plain:true});
        }else{
            //register
        }
    }

});

但它没有按预期工作,因为我得到控制台错误:没有定义ngDialog.

我收到了上述错误.以下是一些简化的代码片段.应用:

app = angular.module('app', ['app.classes', 'ngDialog' .....]);

模块配置:

app.config(
function ($httpProvider, $translateProvider, $translatePartialLoaderProvider) {
    $translateProvider.preferredLanguage(lang);
    $translateProvider.useLoader('$translatePartialLoader', {
        urlTemplate: 'api/PartialTranslationLoad?lang={lang}&table={part}'
    });
    $translatePartialLoaderProvider.addPart('...');
    $translatePartialLoaderProvider.addPart('...');
    $translateProvider.useSanitizeValueStrategy('sanitize');

    $httpProvider.interceptors.push('APIInterceptor');
  }
);

拦截器服务在app.classes模块中:

classes = angular.module("app.classes", []);

classes.service('APIInterceptor', function ($q, $rootScope, $location, $window, $injector, ngDialog) {
    ......
}

错误:

找到循环依赖:$ http < - $ templateRequest < - $ compile < - ngDialog < - APIInterceptor < - $ http < - $ translatePartialLoader

如果我不将ngDialog注入我的拦截器,一切都很好.有人可以解释为什么我得到循环依赖性错误？

谢谢

我正在使用Cordova,Bootstrap和Angular JS(1.3.x)开发混合应用程序,并在Chrome桌面浏览器和Android设备(棒棒糖,5.0.2)上进行测试.

在特定视图中,我使用ngDialog打开模态窗口.此对话框中的内容可能超过典型智能手机大小的高度,因此需要垂直滚动.这就是问题所在:

应该显示在对话框底部(初始视线之外)的大多数元素不会出现或不会被渲染.当我盲目地点击消失的交互元素所在的区域时,它们将被绘制.当我再次向上滚动时,顶部的元素消失. Android 4.4上不存在此行为.

现在,我可以在Windows Chrome浏览器(v43)上重现此错误.

这些是步骤:

1. 运行此Plunkr http://embed.plnkr.co/VGYUe2i9vwsQZ21vc3LB/preview
2. 使用最新的Chrome版本进行测试
3. 确保,此插件以嵌入视图显示(重要)
4. 打开Chrome开发者工具
5. 点击"切换设备模式"(智能手机图标)(重要)
6. 将垂直分辨率限制为高度约600px单击"打开对话框"并向下滚动到底部
7. 你能读一下"你好,你看到我了吗？" ？
8. 如果没有,请按下文本框顶部或下方的其中一个面板,这将导致重新绘制,您可以看到文本.

这是它的样子:

不行 - >标记为红色框中没有文字:

确定 - >点击它或浏览器选项卡切换后

我在postman博客上发现了这篇文章,但"修复工具"在我的案例中似乎不起作用. http://blog.getpostman.com/2015/01/23/ui-repaint-issue-on-chrome/

有人能指出我正确的方向吗？

我似乎无法使用角度的ngDialog.这是我的代码

discountModal函数

 $scope.discountModalOpen = function () {
  ngDialog.open({
      template: 'views/discountModal.html',
      controller: 'ModalInstanceCtrl',
      scope: $scope
    });
  };

discountModal的控制器

angular.module('myApp')
.controller('myProductsCtrl', 
['$scope', '$stateParams', 'productService', '$modal','ngDialog', '$filter','$location',
function ($scope, $stateParams, productService, $modal, $filter,ngDialog, $location) {
 });

app.js

angular
.module('myApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngSanitize',
'ngTouch',
'restangular',
'ui.router',
'ui.bootstrap',
'angularMoment',
'timer',
'ngMessages',
'ngDialog'
])

我的javascript控制台中仍然出现以下错误

TypeError:ngDialog.open不是Scope的函数.$ scope.discountModalOpen(http:// localhost:9000/scripts/controllers/myProductsCtrl.js:293:18)at fn(eval at(http:// localhost:9000) /bower_components/angular/angular.js:13231:15),:4:242)在http:// localhost:9000/bower_components/angular-touch/angular-touch.js:478:9 在Scope.$ get.Scope .$ eval(http:// localhost:9000/bower_components/angular/angular.js:15916:28)在Scope.$ get.Scope.$ apply(http:// localhost:9000/bower_components/angular/angular.js) :16016:25)在HTMLButtonElement.(http:// localhost:9000/bower_components/angular-touch/angular-touch.js:477:13)HTMLButtonElement.jQuery.event.dispatch( …