如何让多个 AngularJS 日历指令独立工作？

Question

我有以下日历控件，我在一个页面上显示了两次。

http://jsfiddle.net/edwardtanguay/pe4sfex6/14/

<div>
    <calendar selected="day"></calendar>
    <div>Selected date: <b>{{day.format('dddd, MMMM Do YYYY')}}</b></div>
</div>

<div>
    <calendar selected="day"></calendar>
    <div>Selected date: <b>{{day.format('dddd, MMMM Do YYYY')}}</b></>
</div>

当我点击一个日历上的日期时，另一个日历也会发生变化，例如他们都有相同的范围。我希望它们有单独的作用域。

所以我可以注释掉范围的种类：

scope: {
    //selected: "="
},

并为控件提供单独的变量：

<div>
    <calendar selected="day1"></calendar>
    <div>Selected date: <b>{{day1.format('dddd, MMMM Do YYYY')}}</b></div>
</div>

<div>
    <calendar selected="day2"></calendar>
    <div>Selected date: <b>{{day2.format('dddd, MMMM Do YYYY')}}</b></>
</div>

然后我可以分别设置日期，但是，然后日期就不会再出现了。

我怎样才能 (1) 让控件独立工作，并且 (2) 使每个指令能够更改它自己的变量？

Answer 1

如果您将最后一位复制到您的 jsfiddle 中，但不更改指令的范围定义，那么您的代码似乎可以像您希望的那样工作。

指令是'instantiated'两次，一次$scope.selected == day1，一次$scope.selected == day2。

Answer 2

更改为第 1 天和第 2 天有效：JSFiddle：

<div>
    <calendar selected="day1"></calendar>
    <span>Selected date: <b>{{day1.format('dddd, MMMM Do YYYY')}}</b></span>
</div>

<div>
    <calendar selected="day2"></calendar>
    <span>Selected date: <b>{{day2.format('dddd, MMMM Do YYYY')}}</b></span>
</div>

如何让多个 AngularJS 日历指令独立工作？

How to get multiple AngularJS calendar directive to work independently?

directive

angularjs