Angularjs - Директива Двусторонняя привязка Изолированная область Проблема

Я строю SPA на основе AngularJS. В одном компоненте SPA у меня есть система загрузки документов, которая построена по специальной директиве под названием docmgmt. В компоненте docmgmt у меня есть другой настраиваемый компонент, называемый modalCompanyQuery. Это модальное окно, которое ищет базу данных компании и возвращает соответствующие результаты компании. После поиска правильной компании пользователь нажимает на название компании, которое затем возвращается обратно в родительскую директиву docmgmt, называемую modalOutput.Angularjs - Директива Двусторонняя привязка Изолированная область Проблема

Проблема в том, что, несмотря на использование двухсторонней привязки '=', новая мода для modalOutput (output) создается в 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 
}]);

источник

2015-06-02 Ka Tech

всякий раз, когда вы выполняете 'scope: {}', директива забывает все родительские области и ссылается только на то, что передается в этом. '=' - передать ** объект javascript ** в области директивы, а '@' - передать строку. Я думаю, что оба являются двухсторонней привязкой. –

И если 'outputSelect' является частью области вашего родительского контроллера, вы можете установить директиву' output', и это должно сработать. –

OutputSelect является частью родительской области, которая является modalOutput. Но значения не переходят из modalCompanyQuery обратно в docmgmt. Я хотел бы знать, как передать его родителям. –

После некоторых исследований я нашел решение. Следующие две ссылки действительно помогли мне понять проблему и решение.

Understanding $emit, $broadcast and $on in AngularJS

Communication between nested directives

Так что я в конечном итоге с помощью $ испускают и $ на. Результат выглядит следующим образом:

Директива 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); 
      });

Надеется, что это помогает другим людям, которые приходят через тот же Брикуолл!

источник

2015-06-02 08:02:46

хорошо, в вашей docmgmt директиве, я вижу, что вы сделали сферу директивы пустого делания: scope: {}.

Я думаю, что вы должны сделать, это нравится:

scope: { 
    modalOutput: "=" 
}

кстати делать выше ожидает атрибут в шаблоне директивы с именем modal-output, который должен быть object типа.

Попробуйте ...

источник

2015-06-02 07:36:50

Спасибо за помощь, но это не сработало. Я думаю, что это связано с изолированной областью и вложенными директивами. В любом случае я нашел решение, используя $ emit и $ on, как показано ниже. Еще раз спасибо за то, что он ушел! –

Angularjs - Директива Двусторонняя привязка Изолированная область Проблема

ответ

Смежные вопросы