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

按钮在模态中加载指令，我有一些两种方式的绑定可以使用。

我想知道一个好的方法。我没有使用引导模式，因为我遇到了多个 Id 相同的冲突。

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函数（在else末尾添加2行编译模板：

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

希望对你有帮助