gpt4 book ai didi

javascript - 指令中的 Angular 条件模板;基于将范围变量与 promise 隔离的决策

转载 作者:行者123 更新时间:2023-11-28 19:41:23 27 4
gpt4 key购买 nike

基本上我尝试对地址进行条件格式化。

我做了一个 plnkr 来可视化简化的问题: http://plnkr.co/edit/A5eV96H9eKIua9mJyKSL?p=preview

指令负责显示正确的模板:

app.directive('tqFormatAddress', function(){
return {
restrict: 'E',
scope: {
address:'='
},
link: function (scope, element, attrs) {
switch(scope.address.country) {
case "de":
scope.template = 'adress-de.html';
break;
case "uk":
scope.template = 'adress-uk.html';
break;
}
},
template: '<ng-include src="template"></ng-include>',
};
});

这是做这样的事情的正确方法吗?

下一步是将代码集成到我的应用程序中。我使用 $resource 获取数据:

$scope.ansprechpartner = this.Ansprechpartner.get({id: $routeParams.id});

在 View 中:

<tq-format-address address="ansprechpartner.Dienstadresse"></tq-format-address>

现在我在指令中收到错误,因为资源尚未解析。

一种方法是将整个 ansprechpartner 提供给指令:

<tq-format-address address="ansprechpartner.Dienstadresse" promise="ansprechpartner"></tq-format-address>

然后做这样的事情(未经测试的演示代码):

    link: function (scope, element, attrs) {
ansprechpartner.then(function () {
switch(scope.address.country) {
case "de":
scope.template = 'adress-de.html';
break;
case "uk":
scope.template = 'adress-uk.html';
break;
}
});
},

是否有另一种方法可以在没有 promise 的情况下做到这一点?

最佳答案

在这种情况下没有理由不使用 ngInclude

如果您不想在目录中使用 Promise,则可以使用表达式,这样模板就会在地址对象发生变化时立即更改:

app.directive('tqFormatAddress', function(){
return {
restrict: 'E',
scope: {
address:'='
},
link: function (scope, element, attrs) {

scope.template = function () {
if (scope.address && scope.address.country)
return 'adress-' + scope.address.country + '.html';

return '';
};
},
template: '<ng-include src="template()"></ng-include>',
};
});

关于javascript - 指令中的 Angular 条件模板;基于将范围变量与 promise 隔离的决策,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24952576/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com