AngularJS:在构建HTML小部件时将哪个逻辑放在哪里

时间:2013-02-02 13:45:23

标签: angularjs

我非常(!)是Angular.js的新手,我正在尝试理解在哪里放置逻辑的各个部分,以便遵循最佳实践并分离业务和表示逻辑。

我的具体用例是我有一系列课程,其中包含多个注册和一些可用席位。根据这些值,我想提供一个进度条(或者,如果没有设置可用的座位,只需要一个文本)。

我的问题是在哪里放置逻辑的各个部分,以及如何正确地传递值。到目前为止,我已经创建了一个指令的HTML部分,如下所示:

<signupprogress available="{{course.available_seats}}" filled="{{course.filled_seats}}"></signupprogress>

我的问题是(首先)如果指令是正确的方法,那么,如果构建进度条的逻辑应该放在编译函数,链接函数,模板中,或者其他一些地方。对我来说,链接函数的编译似乎是最正确的,但我不想用HTML填充它们,也不能从HTML中正确地获取属性值(attrs。$观察我只见过的例子)实现获取一个属性。)

2 个答案:

答案 0 :(得分:1)

该指令是我认为的方式。 我希望我的HTML内容在模板内部,链接函数内部的逻辑(编译函数通常更多用于中继器等)。 并使用指令定义中的“scope”属性设置为“=”,这样就会自动反映更改。

答案 1 :(得分:1)

是的,使用指令,因为您需要修改DOM。

如果进度条的所有HTML和替代文本都可以放在指令的模板中,那么就这样做。并且,如果可能的话,使用'@'进行单向绑定,这清楚表明该指令不需要修改“可用”和“已填充”值。如果您发现需要链接功能,那么正如@ShaiRez所提到的,'='可能更容易。 (顺便说一下,这是$watch multiple attributes的一种方式,而不是使用$ observe。也许相同的技术可用于$ observe。)

要在模板中显示进度条或替代文本,请在模板中使用ng-hide或ng-show。这是simple example的(也使用'@')。