Question

我正在建立一个基于AngularJS的SPA。在SPA的一个组件中，我有一个文档上传系统，它是通过下面名为docmgmt的自定义指令构建的。在组件docmgmt中，我有另一个名为modalCompanyQuery的自定义指令组件。它是一个模态窗口，用于搜索公司数据库并返回匹配的公司结果。在找到合适的公司后，用户点击公司名称，然后将其传递回名为modalOutput的父指令docmgmt。

我遇到的问题是尽管使用双向绑定＆＃39; =＆＃39; modalOutput（输出）的新范围是在modalCompanyQuery中创建的。如何将modalCompanyQuery搜索结果（modalOutput）传递回父指令docmgmt？有关返回结果的最简单方法的任何帮助都会很棒。先感谢您！

这是我的代码简化

modalCompanyQuery模板

<div modal-company-query dialog-show="modalCompanyQuery.isShow"  dialog-name ="Select Company" dialog-class="modalSelectCompany" dialog-icon ="fa fa-building" dialog-header="modalSelectCompany-header" company-type = "srchCompanyTypeList" output-select="modalOutput">
</div>

指令docmgmt

angular.module("docmgmt", [])
.directive("docmgmt",['$http','sessionService','Upload','docService', function($http,sessionService,Upload,docService){


    return{
                link: function(scope,element,attrs){ 
                   scope.docRecord = {};
                   scope.rightPane = {showAction:true, showInsert:false,showUpdate:false, showRead:false};   
                   scope.progressBar = 0;
                   scope.submit =[{}];

                //modal company search and linking search output results to docmgmt scope

                   scope.modalCompanyQuery = {isShow:false};
                   scope.modalOutput={};
                   scope.test=function(){
                        console.log(scope.modalOutput);
                    }



                },//return
                restrict:"A", 
                replace:true,


                templateUrl:"partials/docmgmt/docmgmt.html",//template
                transclude:true,
                scope:{
                } 
            }//return
}]);

指令modalCompanyQuery

 angular.module("company", [])
    .directive("modalCompanyQuery",['$http','companyService', function($http,companyService){

    return{
                link: function(scope,element,attrs){ // normal variables rather than actual $scope, that is the scope data is passed into scope



                   //Read Company
                   scope.getRecord = function(result){
                     scope.output={id:result.cs_id, type:result.type,name:result.name, active: result.active};
                     console.log(scope.output);
                     scope.isShow = false;
                   }//getRecord

                   /*AJAX search functions go here*/

                },//return
                restrict:"A", //assign as attribute only ie <div my-modal> Content </div>
                replace:true,//replaces div with element, note if this is the case must all template must be wrapped within one root element. eg button is within ul otherwise get an error. 


                templateUrl:"partials/company/tpl/desktop/modal-company-query-desktop.html",//template
                transclude:true, //incorporate additional data within
                scope:{
                    isShow:"=dialogShow",//two way binding
                    name:"@dialogName",//name to be in header
                    dialogClass:"@dialogClass",// style of the dialog
                    dialogHeader:"@dialogHeader",//color of the dialogHeader 
                    dialogIcon:"@dialogIcon",//font awesome icon
                    output:"=outputSelect"
                    //selectCompany:"=selectCompany",//company to be selected from search and passed back to main window
                } //If on this should mean the html input is not binded to custom directive
            }//return
}]);

Answer 1

好的，在你的docmgmt指令中，我发现你已经将指令的范围变为空：的 scope: {}

我认为你应该这样做：

scope: { modalOutput: "=" }

顺便说一下，在您的指令模板中需要属性，其名称为modal-output，且必须为object类型。

试试吧......

Answer 2

经过一番研究，我找到了解决方案。以下两个链接确实帮助我理解了问题和解决方案。

Understanding $emit, $broadcast and $on in AngularJS

Communication between nested directives

所以我最终使用$ emit和$ on。结果如下：

指令modalCompanyQuery

             scope.getRecord = function(result){
               scope.output={id:result.cs_id, type:result.type,name:result.name, active: result.active};
               scope.$emit('companyRecord', {record:scope.output});
               scope.isShow = false;
             }//getRecord

指令docmgmt

            scope.$on('companyRecord', function (event, args) {
             scope.modalOutput = args.record;
             console.log('Success');
             console.log(scope.modalOutput);
            });

希望这可以帮助其他人遇到同样的砖墙！

Angularjs - 指令双向绑定隔离范围问题

2 个答案: