如何在指令之间共享状态/属性
如何在指令之间共享状态/属性
提问于 2017-05-22 08:10:32
如何使用指令的属性作为同一类型的另一个指令的属性？
在我谈到这个问题之前，我想指出我是AngularJS新手，这是一个学习项目的一部分。:)
在我的例子中，我有两个日期时间选择器指令的实例，我将其从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的重要片段：
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
Stack Overflow用户
发布于 2017-05-22 09:10:56
你有几个选择：
- 使用附加到同一父属性的隔离作用域。
- 通过父级传递更改。
- 实现通信服务，将更改通知订阅者(在本例中为另一个指令)。
- 不是我最喜欢的，而是使用一个全局监视变量。
只是我的两分钱；)编码愉快！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44107786
复制相关文章
相似问题
腾讯云开发者
