AngularJS/HTML - попытка избежать закрытия тега в пользовательской директиве

Question

Я пытаюсь посмотреть, есть ли хороший способ для внедрения ng-bootbox с пользовательской директивой для выбора адреса.

Вот простой пример

<button class="btn btn-lg btn-primary" 
     ng-bootbox-title="A cool title!" 
     ng-bootbox-custom-dialog="<h1>zzzzzzzzzzzzzzz!</h1>" 
     ng-bootbox-buttons="customDialogButtons" 
     ng-bootbox-options="dialogOptions"> 
      Custom dialog with template 
    </button> 

Здесь у меня есть сообщение о том, что кавычки должны совпадать. Я также попытался это:

ng-bootbox-custom-dialog="<h1>zzzzzzzzzzzzzzz!<'/'h1>" 

Делать это не сломал H1 и оказал этот

'/'h1>" 

В конце концов я хочу сделать это:

ng-bootbox-custom-dialog="<qas-modal-find-postcode address='record.address' town='record.town' county='record.County' post-code='record.postcode'></qas-modal-find-postcode>" 

кнопка загружает директиву в модальных и у меня есть два способа привязки к работе.

Я хотел бы знать хороший подход для этого. Я не использую bootstrap modal, потому что я получаю некоторые конфликты с несколькими идентификаторами одинаковыми.

Plunker:

Angular with ng-bootbox

Answer 1

Основываясь на вашей скрипке я изменил некоторые ошибки опечатки и редактировать ваши $ngBootbox директивы, как это:

plunker: http://plnkr.co/edit/3iMVoaNyn7zJA2ZCj5xC?p=preview

главный файл AJS:

angular.module('myapp', ['ngBootbox']) 
    .controller('myappController', function($scope) { 

     $scope.record = {}; 
     $scope.record.Country = "UK"; 
     $scope.record.postcode = "SW12 4RT"; 
     $scope.record.County = "Some county"; 
     $scope.record.town = "some town"; 

    }) 
    .directive('qasModalFindPostcode', function() { 
    return { 
     templateUrl: 'tmplModalQasPostcode.html', 
     restrict: 'E', 
     scope: { 
      postCode: '=', 
      address: '=', 
      town: '=', 
      county: '=' 
     }, 
     link: function (scope, element, attrs) { 

       scope.doSearch = function() { 
       alert(scope.modelTest) 
       console.log(scope); 
        scope.modelTest = "some text" 
       } 
     } 
    } 

});

шаблон модальный tmplModalQasPostcode.html:

<div> 
    <button ng-click="doSearch('test')">dsdffsdfsd</button> 
    <input type="text" ng-model="modelTest"> 
    {{modelTest}} 
</div> 

функция

ngBootbox custonDialog (добавлены 2 строки в конце else скомпилировать шаблон:

customDialog: function (options) { 
     if (options.templateUrl) { 
      getTemplate(options.templateUrl) 
      .then(function (template) { 
       options.scope = options.scope || $rootScope; 
       options.message = $compile(template)(options.scope); 
       $window.bootbox.dialog(options); 
      }) 
      .catch(function() { 
       $window.bootbox.dialog(options); 
      }); 
     } 
     else { 
      options.scope = options.scope || $rootScope; 
      options.message = $compile(options.message)(options.scope); 
      $window.bootbox.dialog(options); 
     } 
     }, 

надеюсь, что это может помочь вам