我们可以加载动态 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,
});
我注意到 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,
});