与多个模板角指令

任务：与多个模板角指令

要显示的接触。
联系人是JSON数据，我们假设{name：“Mark”，位置：“England”，电话：[...]}。
联系可以通过多种方式显示：紧凑型/详细/额外信息（共享联系人 - 额外的指令）增强

因为接触会在不同的地方不同的页面中显示它的自然创建指令（小工具）联系，但这里是问题：“如何组织相同的部件与多个模板？”

选项： - ，可能具有很多 NG-开关和NG-如果大模板

用一个模板创建一个指令，根据部分联系“类型”隐藏
为每个模板创建指令 - 差不多只有不同模板（或templateURL）的相同指令
要 load templates dynamically while linking - 有 transclusion问题和更换（合并属性）

什么是您的expirience与解决这些问题呢？

来源

2013-09-25 SpeedShifter

您是否需要在指令中粘贴一个模板？你能简单地使用一个指令作为你的模板的ng-include旁边的属性吗？ –

你是否在谈论[亚当在这里建议的解决方案]（http://codepen.io/anon/pen/tabcx）？ – SpeedShifter

就我个人而言，我认为选项2提供了显示模式之间的干净分离。我创建了一个working CodePen example来说明如何通过为每个模板使用单独的指令来干净地完成此操作。

我在我的CodePen示例中使用的方法使用了一个模板工厂，它通过Angular DI注入到每个指令中。模板工厂实现非常干净，因为它仅为每种不同的支持的显示模式（详细的紧凑型&）使用ng-include模板字符串。实际的HTML模板（partials）可以放在外部视图文件或内部脚本块中。

使用接触指令很简单：

<contact compact ng-repeat="contact in contacts" ng-model="contact"></contact>

这将创建联系人列表的压缩版本。

<contact detailed ng-repeat="contact in contacts" ng-model="contact"></contact>

这会创建详细的联系人列表。

我会承认我没有像这样部署代码到生产环境中，所以可能存在可扩展性或我没有考虑过的其他问题。我希望我提供的代码能够回答你的问题，或者至少为进一步探索提供灵感。

来源

2013-09-26 03:08:09

感谢您的答复，即使有例子）。你的权利，如果指令太小，每种类型都有一个并不重要，但它很灵活，只有在必要时才能增强其中的一个。 – SpeedShifter

只有我可以添加，使用ng-include作为模板么？为什么不使用“模板”工厂就像地图“联系类型”=>“模板的网址”，你看到它的任何利润？ – SpeedShifter

哇 - 让我的一天 – alonisser

我建立一个新的方法工作亚当例子，使用也从他们谈论templateUrl财产https://docs.angularjs.org/guide/directive功能角文档样本，这是从角文档的plunker：http://plnkr.co/edit/h2CSf2WqCLYfPvzL9WQn?p=preview

.directive('myCustomer', function() { 
    return { 
     templateUrl: function(elem, attr){ 
     return 'customer-'+attr.type+'.html'; 
     } 
    }; 
    });

而且这是我的混音解决方案：

http://codepen.io/anon/pen/wawOyz?editors=101

app.factory('templates', function() { 
    return { 
    compact: 'compact', 
    detailed: 'detailed' 
    }; 
}); 

app.directive('contact', function(templates) { 
    return { 
    restrict: 'E', 
    templateUrl: function($elem, $attr){ 
     return templates[$attr.mode];  
    }, 
    scope: { 
     contact: '=ngModel' 
    } 
    }; 
});

我喜欢ŧ他认为在一家工厂有所有的模板地址，但我发现每个模式的指令都是相当重复的，如果你有几个使用这种方法的元素，你需要命名空间（contact-text，email-text，company-text）他们不会崩溃。

我不确定如果这是更好的方式去，更短，更干，但也许是更难测试或更少的定制。我只是想分享这个方法，以防它可以帮助任何人。

来源

2015-04-20 21:34:10

与多个模板角指令

回答

相关问题