Question

我注意到Angular的对话框可以通过加载html文件（或html格式的任何文件）来执行自定义对话框，如下所示：

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

我的问题是，我们可以代替加载tempUrl，让tempUrl成为我们可以动态加载内容的模板吗？

我尝试在ng-control中添加tempUrl，如下所示：

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

显然，“测试”通过“描述”显示不正确，因为后者涉及异步过程。顺便说一句，如果我console.log(scope.description)它实际上会显示正确的内容 - 我假设在加载描述之前刚加载的对话框......也许它甚至在页面加载时被加载。

我尝试在.then()上使用$http，但仍无效。

Answer 1

这同时也很棘手和简单。这不是因为您异步运行$http或$.ajax，因此总线与未更新对话框范围的事实有关。

下面：

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

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

1 个答案: