Javascript 如何在指令之间共享状态/属性

如何将一个指令的属性用作同一类型的另一个指令的属性

在回答这个问题之前，我想指出我对AngularJS是新手，这是一个学习项目的一部分。：）

在我的例子中，我有两个datetime选择器指令的实例，我将其与HTMl分离以使其可重用。其中一个是起始日期，另一个是截止日期

我想使用“开始日期”中选择的日期作为“结束日期”中的最小可用日期

但是，我似乎无法以某种方式将from date组件中拾取的日期转换为to date组件。即使我真的把它放进去了，它似乎也不会更新，这意味着to date组件只是默认回到最初设置的最小日期

---

这是指令：

<div class="form-group flex center">
    <label class="date-label" for="startdate">{{ ctrl.name }}</label>
    <md-datepicker class="date-value" id="startdate" ng-model="ctrl.today"
                   md-min-date="ctrl.from" md-max-date="ctrl.to"></md-datepicker>
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="hours" data-toggle="dropdown">
            Hours
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="hours">
            <li role="presentation"><a role="menuitem">00</a></li>
            <li role="presentation"><a role="menuitem">01</a></li>
            <li role="presentation"><a role="menuitem">02</a></li>
            <li role="presentation"><a role="menuitem">03</a></li>
            <li role="presentation"><a role="menuitem">04</a></li>
            <li role="presentation"><a role="menuitem">05</a></li>
            <li role="presentation"><a role="menuitem">06</a></li>
            <li role="presentation"><a role="menuitem">07</a></li>
            <li role="presentation"><a role="menuitem">08</a></li>
            <li role="presentation"><a role="menuitem">09</a></li>
            <li role="presentation"><a role="menuitem">10</a></li>
            <li role="presentation"><a role="menuitem">11</a></li>
            <li role="presentation"><a role="menuitem">12</a></li>
            <li role="presentation"><a role="menuitem">13</a></li>
            <li role="presentation"><a role="menuitem">14</a></li>
            <li role="presentation"><a role="menuitem">15</a></li>
            <li role="presentation"><a role="menuitem">16</a></li>
            <li role="presentation"><a role="menuitem">17</a></li>
            <li role="presentation"><a role="menuitem">18</a></li>
            <li role="presentation"><a role="menuitem">19</a></li>
            <li role="presentation"><a role="menuitem">20</a></li>
            <li role="presentation"><a role="menuitem">21</a></li>
            <li role="presentation"><a role="menuitem">22</a></li>
            <li role="presentation"><a role="menuitem">23</a></li>
        </ul>
    </div>
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="minutes" data-toggle="dropdown">
            Minutes
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="minutes">
            <li role="presentation"><a role="menuitem">00</a></li>
            <li role="presentation"><a role="menuitem">01</a></li>
            <li role="presentation"><a role="menuitem">02</a></li>
            <li role="presentation"><a role="menuitem">03</a></li>
            <li role="presentation"><a role="menuitem">04</a></li>
            <li role="presentation"><a role="menuitem">05</a></li>
            <li role="presentation"><a role="menuitem">06</a></li>
            <li role="presentation"><a role="menuitem">07</a></li>
            <li role="presentation"><a role="menuitem">08</a></li>
            <li role="presentation"><a role="menuitem">09</a></li>
            <li role="presentation"><a role="menuitem">10</a></li>
            <li role="presentation"><a role="menuitem">11</a></li>
            <li role="presentation"><a role="menuitem">12</a></li>
            <li role="presentation"><a role="menuitem">13</a></li>
            <li role="presentation"><a role="menuitem">14</a></li>
            <li role="presentation"><a role="menuitem">15</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation"><a role="menuitem">16</a></li>
            <li role="presentation"><a role="menuitem">17</a></li>
            <li role="presentation"><a role="menuitem">18</a></li>
            <li role="presentation"><a role="menuitem">19</a></li>
            <li role="presentation"><a role="menuitem">20</a></li>
            <li role="presentation"><a role="menuitem">21</a></li>
            <li role="presentation"><a role="menuitem">22</a></li>
            <li role="presentation"><a role="menuitem">24</a></li>
            <li role="presentation"><a role="menuitem">25</a></li>
            <li role="presentation"><a role="menuitem">26</a></li>
            <li role="presentation"><a role="menuitem">27</a></li>
            <li role="presentation"><a role="menuitem">28</a></li>
            <li role="presentation"><a role="menuitem">29</a></li>
            <li role="presentation"><a role="menuitem">30</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation"><a role="menuitem">31</a></li>
            <li role="presentation"><a role="menuitem">32</a></li>
            <li role="presentation"><a role="menuitem">33</a></li>
            <li role="presentation"><a role="menuitem">34</a></li>
            <li role="presentation"><a role="menuitem">35</a></li>
            <li role="presentation"><a role="menuitem">36</a></li>
            <li role="presentation"><a role="menuitem">37</a></li>
            <li role="presentation"><a role="menuitem">38</a></li>
            <li role="presentation"><a role="menuitem">39</a></li>
            <li role="presentation"><a role="menuitem">40</a></li>
            <li role="presentation"><a role="menuitem">41</a></li>
            <li role="presentation"><a role="menuitem">42</a></li>
            <li role="presentation"><a role="menuitem">43</a></li>
            <li role="presentation"><a role="menuitem">44</a></li>
            <li role="presentation"><a role="menuitem">45</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation"><a role="menuitem">46</a></li>
            <li role="presentation"><a role="menuitem">47</a></li>
            <li role="presentation"><a role="menuitem">48</a></li>
            <li role="presentation"><a role="menuitem">49</a></li>
            <li role="presentation"><a role="menuitem">50</a></li>
            <li role="presentation"><a role="menuitem">51</a></li>
            <li role="presentation"><a role="menuitem">52</a></li>
            <li role="presentation"><a role="menuitem">53</a></li>
            <li role="presentation"><a role="menuitem">54</a></li>
            <li role="presentation"><a role="menuitem">55</a></li>
            <li role="presentation"><a role="menuitem">56</a></li>
            <li role="presentation"><a role="menuitem">57</a></li>
            <li role="presentation"><a role="menuitem">58</a></li>
            <li role="presentation"><a role="menuitem">59</a></li>
        </ul>
    </div>
    <span class="text-danger" ng-show="shiftForm.plannedStart.$error.required">*Required </span>
</div>

这就是它在“父项”上的用法：

---

您有两个选择：

• 使用附加到相同父属性的隔离范围
• 通过家长沟通变更
• 实现一个通信服务来通知订阅者（在本例中是另一个指令）有关更改的信息
• 不是我最喜欢的，但是使用一个全局关注的变量

---

只要我的两分钱；）。。。快乐编码

我如何通过父作用域传递更改？可以使用隔离作用域将双向属性绑定到父作用域中的属性。Dan Wahlin写了一系列关于隔离范围的优秀文章：。

(function () {

    angular.module("datePicker", [])
        .directive("datePicker", function () {

            return {
                require: 'ngModule',
                restrict: "E",
                scope: {
                    ctrl: '=ctrl'
                },
                templateUrl: "app/views/datepicker.html"
            };
        });
})();

    <form novalidate name="shiftForm" ng-submit="vm.addNewShift()" ng-show="vm.noShiftsFound">
        <div>
            <date-picker ctrl="from"></date-picker>
        </div>
        <div>
            <date-picker ctrl="to"></date-picker>
        </div>
        <div class="form-group">
            <input type="submit" value="Search" class="btn btn-primary" ng-disabled="shiftForm.$invalid" ng-click="test()"/>
        </div>
    </form>

let vm = this;  
        vm.myDate = moment().format("DD-MM-YYYY HH:mm:ss");
        vm.fromDate = moment().subtract(6, 'hours').format("DD-MM-YYYY HH:mm:ss");

        vm.today = new Date();
        // for from
        vm.minDate = new Date(
            vm.today.getFullYear(),
            vm.today.getMonth(),
            vm.today.getDate() - 1
        );

        vm.maxDate = new Date(
            vm.today.getFullYear(),
            vm.today.getMonth(),
            vm.today.getDate() + 1
        );

        $scope.from = {
            name: "Planned Start", 
            from: vm.minDate,
            to: vm.maxDate,
            today: vm.today
        };

        $scope.to = {
            name: "Planned Finish",
            from: vm.today,
            to: vm.maxDate,
            today: vm.today
        };