gpt4 book ai didi

javascript - ngDialog 忽略 AngularJS 1.5 中表单中的 NG 属性

转载 作者:行者123 更新时间:2023-11-29 16:49:26 27 4
gpt4 key购买 nike

我在 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>

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

相同的模板,相同的一切,完全一样,所以组件是否正确可能是 ngDialog 类型的错误?

我只想让 ng-attributes 在里面工作,如果我单击按钮提交然后关闭对话框并获取 promise 日志消息

Check the Plunkr Example

如果我在其中使用 scope: { obj : '=' } 属性,指令也会失败组件忽略一切。

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

最佳答案

派对迟到了,但万一有人遇到同样的问题......

这里的技巧是组件总是在隔离范围内创建的。在您的 Plunkr 示例中,当您为 ngDialog.openConfirm() 设置模板时,ngDialog 的作用域实际上是您的自定义组件的父作用域,所以难怪它无法识别 closeThisDialog( )confirm() 方法:它们根本不存在于其“子/隔离”范围内。

但它们存在于它的“兄弟”范围内——ngDialog 创建的范围。因此,为了能够与该作用域通信,我们必须在组件的独立(“子”)作用域及其“兄弟”作用域 - ngDialog 的 作用域之间设置 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/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com