我在 Controller 中有这个调用 指令
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>
当我单击指令上的按钮时,我在控制台上看到 SENDED 消息,但对于组件 看起来就像忽略每个 NG 属性,点击按钮什么也不做, 但正确加载模板。
相同的模板,相同的一切, 完全相同,所以也许是 ngDialog 类型的组件错误,对吗?
我只希望 ng-attributes 在内部工作,如果我单击提交按钮,然后关闭对话框并获取 promise 日志消息
如果我在其中使用scope: { obj : '=' } 属性,该指令也会失败 组件忽略一切。
我认为示波器存在某种问题 - 指令中的范围声明(或组件中的绑定(bind)) - 以及 openDialog 对象中的范围
最佳答案
聚会迟到了,但是,万一有人遇到同样的问题......
这里的技巧是组件总是在隔离的范围内创建。在您的 Plunkr 示例中,当您为 ngDialog.openConfirm() 设置模板时,ngDialog 的作用域实际上是自定义组件的父作用域,因此难怪它无法识别 closeThisDialog( ) 和 confirm() 方法:它们根本不存在于其“子/隔离”范围内。
但它们存在于其“兄弟”范围内 - ngDialog 创建的范围。因此,为了能够与该作用域进行通信,我们必须在组件的独立(“子”)作用域和其“同级”作用域(ngDialog's作用域)之间设置 Hook 。
对代码进行微小的更改就会产生神奇的效果。我的评论以//AK:
开头function openNgDialogComponent() {
ngDialog.openConfirm({
//AK: the 'form-component' itself exists in context of scope, passed below, hence we can bind $scope's methods to component's internal scope
template : '<form-component on-resolve="confirm()"' +
'on-reject="closeThisDialog()"></form-component>',
scope : $scope,
plain : true,
closeByNavigation : true
}).then(function(deployData) {
$log.debug('Form parameters succesfully returned');
});
}
以及组件本身:
// Component declaration
// /////////////////////////
(function() {
'use strict';
angular
.module('app')
.component("formComponent", {
bindings: { onResolve: "&", onReject: "&" }, //AK: declare delegates bindings
controller: "ComponentController",
controllerAs: "vm",
template:
'<form ng-submit="confirm()">' +
'<h3>Im a Component form</h3>' +
'<button ng-click="vm.reject()">Close Dialog</button>' +
'<button ng-click="vm.resolve()" class="submit">CONFIRM Component Form</button> ' +
'</form>' //AK: buttons now call internal methods, which, in turn call delegate methods passed via bindings
});
})();
// Component Controller
// /////////////////////////
(function() {
'use strict';
angular
.module('app')
.controller('ComponentController', ComponentController);
function ComponentController() {
var vm = this;
vm.title = "I'm the Component controller"
vm.resolve = () => vm.onResolve();//AK: call on-resolve="..." delegate
vm.reject = () => vm.onReject(); //AK: call on-reject="..." delegate
}
})();
关于javascript - ngDialog 忽略 AngularJS 1.5 中表单中的 NG 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37650798/