AngularJS/HTML - trying to escape close tag in custom directive

Question

I'm trying to see if there is a good way to implmenet ng-bootbox with a custom directive for selecting address.

Here is a basic example

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

Here I have the message that the quotation marks must match. I've also tried this:

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

Doing this broke my H1 and it rendered this

'/'h1>"

I eventually want to do this:

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>"

button loads up directive in modal and I have some two way binding to work with.

I would like to know a good approach for this. I am not using bootstrap modal because I was getting some conflicts with multiple Ids being the same.

Plunker:

Angular with ng-bootbox

Answer 1

Based on your fiddle i changed some typo errors and edited your $ngBootbox directive like this:

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

main ajs file:

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"
               }
      }
   }

});

modal template tmplModalQasPostcode.html:

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

ngBootbox custonDialog function (added 2 lines at the end else to compile the template:

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);
        }
      },

hope it can help you