我如何使用指令的属性作为同一类型的另一个指令的属性?
在我提出问题之前,我想指出我是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
};
答案 0 :(得分:0)
您有几个选择:
只是我的两分钱;)......快乐的编码!