我们可以加载动态 Angular 对话框吗?

Can we load dynamic Angular dialog?

我注意到 Angular 的对话框可以通过加载 html 文件(或 html 格式的任何文件)来自定义对话框,如下所示:

$mdDialog.show({
   controller: DialogController,
   templateUrl: tempUrl,
});

我的问题是,我们能否不加载 tempUrl,而是将 tempUrl 设为我们可以动态加载内容的模板?

我试过像这样在我的 tempUrl 中添加 ng-control

<md-dialog aria-label="test"><md-content ng-controller="dynamicContent">

然后使用{{scope.property}}操作内容却失败了。正确的方法是什么?

P.S。我认为这可能与我生成的动态内容是异步完成的事实有关。

这是我的代码:

  $scope.showCardDes = function(card) {
    var tempUrl = card.link;
    tempUrl = tempUrl.replace('sometext','othertext');
    tempUrl = tempUrl + '.json?api_key=xxx';
    $log.debug(tempUrl);
    $.ajax({
      url: tempUrl,
      crossDomain: true,
      dataType: "json",
      success: function(data) {
        $log.debug(data);
        $scope.description = data.results[0].description;
      },
      error: function(status) {
        $log.debug(status);
      }
    });
    $mdDialog.show({
      controller: DialogController,
      templateUrl: 'detail.html',
    });
  };
  $scope.test = 'test';

想看$http代码的人:

$http({
  url: tempUrl,
  method: 'GET',
}).success(function(data) {
    $log.debug(data);
    detail = data;
    $scope.description = data.results[0].description;
  }).
  error(function(status) {
    $log.debug(status);
  });
$mdDialog.show({
  controller: DialogController,
  templateUrl: 'detail.html',
});
$scope.test = 'test';

这是我在对话框中设置的 html:

<md-dialog aria-label="Hi there.">
  <md-content style="padding:4%" ng-controller="dynamicContent">
    <p>
      {{description}}
    </p>
    <p>
      {{test}}
    </p>
  </md-content>
  <div class="md-actions" layout="row">
    <md-button ng-click="hide()">Go Back</md-button>
  </div>
</md-dialog>

显然 'test' 被 'description' 显示得很好,但这并不是因为后者涉及一个 ync 过程。顺便说一句,如果我 console.log(scope.description) 它实际上会显示正确的内容 - 我假设对话框在描述加载之前就加载了......也许它甚至在页面加载时加载了。

我尝试在 $http 上使用 .then(),但它仍然不起作用。

这既棘手又简单。不是因为你是运行$http或者$.ajax异步的,bus跟dialog的范围没有更新有关

这里:

$mdDialog.show({
  controller: DialogController,
  templateUrl: 'detail.html',
  scope: $scope,
});