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相同导致冲突。

Plunker:

Angular with ng-bootbox

- nick gowdy

---

一个示例的 Plunker 将会非常棒。 - Manuel Miranda

@ManuelMiranda 你说得很对。我会设立一个。 - nick gowdy

Answer 1

根据您提供的fiddle，我更正了一些拼写错误并编辑了您的$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的customDialog函数（在模板编译时添加了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);
        }
      },

希望它能够帮助你。

- nada

---

嘿nada，你的代码可以工作，但我现在唯一的问题是没有双向绑定。我不知道是否可能，但这就是我想做的。按钮事件处理程序只是一个简单的例子。 - nick gowdy

你到底需要什么？ - nada

我想要双向绑定，因为它是一个指令。例如，指令的父级设置了一些数据，我想通过指令传递这些数据并在模态框中使用。这可能吗？ - nick gowdy

请再次查看 Plunker。那是你需要的吗？ - nada

太好了，非常感谢你的帮助！你想更新你的帖子，我会接受它。 - nick gowdy