如何从控制器监视服务中的变量以打开模态
How to watch a variable in a Service from a Controller to open a modal?
http://plnkr.co/edit/bdHiU0?p=preview
如果我需要的变量是服务返回的一些数据,我很好,这样的东西会起作用:
vm.tickersObject = InitTickersFactory.returnTickers();
然而,在上面的plnkr示例中,我只是在tickerController
中设置了一个切换变量,然后它将值传递并存储到AddTickerFactory
中。
单击打开模式按钮查看日志。
现在我需要我的tickerModalController
来获取那个变量,然后显示或隐藏一个模态。然而,我的tickerModalController
中的vs.showModal
仍停留为false
:
vs.showModal = AddTickerFactory.getToggleStatus();
标记
<ticker-modal></ticker-modal>
<tickers-panel></tickers-panel>
完整代码
// Code goes here
angular.module('app', [])
.directive('tickersPanel', function() {
return {
restrict: "E",
link: function($scope, el, attrs) {
// console.debug($scope, attrs);
},
template: '<div class="ticker" ng-controller="tickerController"><button ng-click="openModal()">Open Modal</button></div>'
};
})
.directive('tickerModal', function() {
return {
restrict: "E",
link: function($scope, el, attrs) {
// console.debug($scope, attrs);
},
template: '<div class="modal" ng-show="showModal" ng-controller="tickerModalController"><h1>Hello World!</h1></div>'
};
})
.factory('AddTickerFactory', [function() {
var vm = this;
vm.addTickerToggle = false;
var addTicker = {
toggleAddTicker : toggleAddTicker,
getToggleStatus : getToggleStatus
}
return addTicker;
function toggleAddTicker(bool) {
console.log(bool);
vm.addTickerToggle = bool;
}
function getToggleStatus() {
return vm.addTickerToggle;
}
}])
.controller('tickerController',
['$scope',
'AddTickerFactory',
function($scope,
AddTickerFactory) {
var vs = $scope;
vs.addTicker = false;
vs.openModal = openModal;
function openModal() {
vs.addTicker = !vs.addTicker;
AddTickerFactory.toggleAddTicker(vs.addTicker);
}
}])
.controller('tickerModalController',
['$scope',
'AddTickerFactory',
function($scope,
AddTickerFactory) {
var vs = $scope;
vs.showModal = false;
vs.showModal = AddTickerFactory.getToggleStatus();
console.log('vs.showModal',vs.showModal);
vs.displayModal = displayModal;
function displayModal() {
vs.showModal = !vs.showModal;
}
}]);
我试着添加了一块手表,但它没有显示任何变化:
vs.showModal = AddTickerFactory.getToggleStatus();
console.log('vs.showModal',vs.showModal);
$scope.$watch('vs.showModal', function(current, original) {
console.log('current',current);
console.log('original',original);
});
$watch
也有一个函数,因此您可以有:
http://plnkr.co/edit/oJ2CTVXKCiLwL9oNw6YR?p=preview
$scope.$watch(function(){
return AddTickerFactory.getToggleStatus();
}, function(current, original) {
vs.showModal = current;
console.log('current',current);
console.log('original',original);
});
相关文章:
- 将变量从link_to传递到rails中的模态
- AngularJS:将变量传递给模态
- 使用帮助程序中使用的模态传递轨道变量link_to
- 发送到模态的 JavaScript 变量
- 将变量从脚本传递到模态中
- 将变量从 Javascript 传递到 PHP - 弹出窗口/模态窗口
- 轨道使用模态变量和局部变量呈现部分
- 将变量传递给模态
- 将变量传递到Bootstrap模态中
- 用javascript变量填充jquery模态表单字段值
- 使用jquery将多个items变量传递到Bootstrap模态中
- 如何从控制器监视服务中的变量以打开模态
- 模态上的React-不变量冲突
- 超链接与变量创建一个模态框/弹出
- 在模态中显示Javascript变量
- 如何传递变量到动态UIkit模态
- 使用UIKIT模态获取变量(而不是提示符)
- 如何检查和传递变量,如果保存按钮在模态点击?javascript
- 变量被重置为'1'在模态窗口
- 是否有一种方法可以从Highcharts传入变量元素ID来启动模态窗口?