我是AngularJs和ngDialog的新手,我在使用ngDialog模式和控制器之间的绑定时遇到了麻烦.我通过指定将控制器的作用域注入模态{ scope: $scope },并且我可以访问控制器中定义的方法,但是对控制器中定义的模型的绑定不能正常工作.
我正在尝试使用模式允许用户向组织添加地址.
这是main.js
var App = angular.module('App', ['ngRoute', 'ngCookies', 'ngDialog']);
...
App.controller('PageOrganization', function($scope, $rootScope, ngDialog, $route, $location){
$scope.addAddressFormData = {};
$scope.addAddress = function(){
ngDialog.open({
template: 'partials/modals/add-address.html',
controller: 'PageOrganization',
scope: $scope
});
};
$scope.saveAddress = function(){
console.log($scope.addAddressFormData);
$scope.organization.addresses.push($scope.addAddressFormData);
console.log($scope.organization);
};
// STUBBED OUT ORGANIZATION
$scope.organization = {
org_type: "nonprofit",
name: 'New Organization',
addresses: [],
phoneNumber: "",
faxNumber: "",
emailAddress: "",
website: "",
primaryContact: "",
primaryEmail: "",
imageUrl: "",
isPrivate: false,
campaigns: [],
admins: [] …我有一个控制器,用ngDialog.open创建一个对话框.我在弹出框$对话框中指定范围:$ scope并使用ng-model设置范围变量.但是,值未在控制器$ scope中设置.ng-click函数可以调用$ scope中的函数.
有没有我缺少的东西,我在这里搜索了很多和github,阅读文档并使用github在项目中提供的所有示例.
下面的JS Fiddles解释道.它显示范围:$ scope不是.open()的范围.它是单向绑定,不会回到$ scope..openConfrm()似乎有预期的行为.
ngDialog.open() - http://jsfiddle.net/s1ca0h9x/ (固定!!按预期工作)
ngDialog.openConfirm() - http://jsfiddle.net/tbosLoa9/ (按预期工作)
var myApplication = angular.module('myApplication', ['ngDialog']);
myApplication.controller('MainController', function ($scope, ngDialog) {
$scope.FormData={newAccountNum:''};
$scope.ShowNgDialog = function () {
ngDialog.open({
template: '<div><input type="text" ng-model="FormData.newAccountNum"/></div>',
plain: true,
scope:$scope
});
}
});
Simple way of opening modal with ngDialog is this:
ngDialog.open({
template: 'template.html',
controller: 'someCtrl'
})
How can I send variables to that 'someCtrl'?
Is there such thing as 'resolve' in ngDialog?
Example from angular-bootstrap modal:
$modal.open({
template: "<p>This is template</p>",
controller: "someCtrl",
resolve: {
someVar: function(){
return "Value of someVar"
}
}
})
this would open the modal send the 'someVar' to the responsible Controller.
UPDATE:
It seems like new version of ngDialog added this feature:
ngDialog.open({
controller: function Ctrl(dep) …我只是试图设置对话框的宽度,我还没有成功(还).我添加了一个CSS类,但宽度设置是对话框阴影之一.
.dialogwidth800 {
width : 800px;
}
...
ngDialog.openConfirm({
template: 'templateRemove',
className: 'ngdialog-theme-default dialogwidth800',
scope: $scope
}).then(
编辑:小提琴纠正与工作解决方案:https://jsfiddle.net/jr626fww/8/
我在我的应用程序中使用ngDialog并且我想创建一个通用的确认模式,我可以在需要时使用它,确认消息将会有所不同.
我的问题:
1-创建一个带有ngDialog功能的指令是一个好主意,它的设计是什么？
2- ngDialog代码中confirm()和openConfirm()的区别是什么.
提前致谢
我有一个网站,允许一个人导入一些数据.他们单击一个按钮,文件选择打开,他们选择一个文件.当他们选择一个文件时,我打开一个他们无法关闭的对话框,告诉他们正在导入他们的数据.一旦我从api调用中获取回调以导入文件,我就关闭该对话框并打开一个新的对话框,提供导入的状态.
在Chrome上,"请等待导入"对话框按预期关闭.在IE上它没有.如果您使用IE 11,它应该在以下小提琴中发生:
你会看到像对话框轮廓一样的幽灵上升并逐渐消失,就像它试图关闭但对话框和叠加仍然存在.
<div ng-controller="MyCtrl">
<input type="file" ng-simple-upload web-api-url="http://www.fakeresponse.com/api/?sleep=5" select-fn="importFileSelected" callback-fn="importDataComplete" />
<script type="text/ng-template" id="templateId">
<div>
Getting Data
</div>
</script>
</div>
JavaScript/AngularJS代码:
var myApp = angular.module('myApp', ['ngDialog', 'ngSimpleUpload']);
function MyCtrl($scope, $http, ngDialog) {
$scope.importDataComplete = function() {
$scope.dlg.close();
}
$scope.importFileSelected = function() {
$scope.dlg = ngDialog.open({
template: 'templateId',
className: 'ngdialog-theme-default',
closeByDocument: false,
showClose: false
});
}
}
angular.module('ngSimpleUpload', [])
.directive('ngSimpleUpload', [function() {
return {
scope: {
webApiUrl: '@',
callbackFn: '=',
selectFn: '=',
buttonId: '@'
},
link: function(scope, element, …我正在使用Angular显示图像列表.
单击图像时,我想显示带有图像和更多信息的对话框.
因此,当打开模态时,我需要传递范围,或者至少是图像.
注意:我正在使用ngDialog作为弹出窗口.
application.controller('ImageController', function ImageController($scope, ImageService, ngDialog) {
$scope.model = {
images: [],
loading: false
}
var load = function () {
$scope.model.loading = true;
ImageService.GetList($scope.model.pages.instagram)
.success(function (data, status, headers, config) {
$scope.model.images = $scope.model.images.concat(data.Images)
})
.error(function (data, status, headers, config) { })
.finally(function () {
$scope.model.loading = false
});;
}
$scope.open = function (image) {
ngDialog.open({
template: '<p>my template {{image.Key}} </p>',
plain: true,
scope: $scope
});
};
load();
});
<div data-ng-app="Application" data-ng-controller="ImageController">
<div data-ng-repeat='image in …弹出窗口关闭时是否会触发任何事件.
模式将在单击事件上打开.模态有一个关闭按钮,但当用户点击模态div之外的任何地方时也会关闭.
每当弹出窗口关闭时,都想执行一些操作.我知道如何在单击该关闭按钮时编写该函数,但是如果该模式被某些其他操作关闭会怎样.
app.controller('MainCtrl', function ($scope, ngDialog) {
$scope.clickToOpen = function () {
ngDialog.open({ template: 'popupTmpl.html' });
};
});
嗨,我有StudentController如下,
function StudentController($scope,StudentService){
$scope.student = StudentService. getStudent();
$scope.editStudent = function(){
return ngDialog.openConfirm({
template: 'edit-student.html',
className: 'ngdialog-theme-default',
scope : $scope // LINE 1
});
}
}
当editStudent被调用函数,我想打开一个对话框,显示的编辑选项.我想使用$scope.student的StudentController自己在edit-student.html为模型数据.对于这个功能,我可以使用scopeNgDialog的属性scope:$scope(参见LINE 1).
现在我试图改变Angular-StyleGuide中的StudentController 建议,我根本不会使用in .在这种情况下,我怎么能访问的？$scopecontrollerstudentedit-student.html
function StudentController(StudentService){
var vm = this;
vm .student = StudentService.getStudent();
return ngDialog.openConfirm({
template: 'edit-student.html',
className: 'ngdialog-theme-default',
scope : ???
// $scope is not used in this controller.
//Then what …因此,当我单击按钮时,我的整个浏览器窗口变黑,并且没有任何弹出窗口显示.当我检查元素.当我的鼠标悬停在它上面时,我可以看到弹出的轮廓,但内容不存在.
app.controller('HomeController', function($scope, $timeout, mapboxService, $mdDialog) {
$scope.showAdvanced = function(ev){
$mdDialog.show({
controller: DialogController,
templateUrl: 'views/reviewForm.html',
parent:angular.element(document.body),
targetEvent: ev,
clickOutsideToClose:true
})
};
});
HTML
<div id="popupContainer">
<md-button ng-click="showAdvanced($event)" flex="100">Add a Review</md-button>
</div>
reviewForm html
<md-dialog>
<md-dialog-content>
<h1>;lkasdjf;lkasdjf;lkajsdf;lkajdf</h1>
</md-dialog-content>
</md-dialog>