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

时间:2017-05-22 08:10:32

标签: javascript angularjs date angularjs-directive

我如何使用指令的属性作为同一类型的另一个指令的属性?

在我提出问题之前,我想指出我是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>

以及它的实施:

(function () {

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

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

这就是&#34;父母&#34;的使用方式:

    <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的重要摘录:

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

1 个答案:

答案 0 :(得分:0)

您有几个选择:

  • 使用附加到相同父属性的隔离范围。
  • 通过家长沟通变更。
  • 实施通信服务以通知订户(在本例中为另一指令)有关更改。
  • 不是我最喜欢的,但使用全局观察的变量。

只是我的两分钱;)......快乐的编码!