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

Question

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

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

在我的例子中，我有两个 datetime-picker 指令实例，我将它们从 HTMl 中分离出来以使其可重用。其中一个是起始日期，一个是截止日期。

我想使用开始日期中选择的日期作为当前日期中的最短可用日期。

但是，我似乎无法以某种方式将起始日期组件中的选定日期放入到最新组件中。即使我确实将其放入，它似乎也没有更新，这意味着最新组件只是默认回到它最初设置的最小日期。

---

这是指令：

<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>

它是js实现：

(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>

来自父级JS的重要sn-p：

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
        };

Answer 1

你有几个选择：

• 使用附加到相同父属性的隔离范围。
• 通过父级传达更改。
• 实施通信服务以通知订阅者（在本例中为另一个指令）有关更改。
• 不是我最喜欢的，但使用全局监视变量。

只要我的两分钱;)...快乐编码！