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 模式，因为我遇到了一些与多个 ID 相同的冲突。

笨蛋：

Angular with ng-bootbox

Answer 1

根据您的 fiddle，我更改了一些拼写错误并编辑了您的 $ngBootbox 指令，如下所示：

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

希望对您有所帮助

AngularJS/HTML - 试图在自定义指令中转义关闭标记

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

html

html-escape-characters

angularjs

bootstrap-modal

bootbox