[英]$scope passing has a Delay
我正在构建一个用于多种用途的Angular弹出系统。 它的工作方式是我有一个名为bitPopup
的指令,该指令将三个变量传递给( type
, action
和data
),如下所示:
的index.html
<bit-popup type="popup.type" action="popup.action" data="popup.data"></bit-popup>
popup.js
app.directive('bitPopup', function () {
return {
restrict: 'E',
template: html,
scope: {
type: '=',
action: '=',
data: '='
},
[***]
}
}
然后,弹出控制器根据类型加载另一个指令:
popup.html (上面显示的HTML模板)
<div class="pop-up" ng-class="{visible: visible}" ng-switch="type">
<bit-false-positive-popup ng-switch-when="falsePositive" type="type" action="action" data="data"></bit-false-positive-popup>
</div>
false_positives.js (包含bitFalsePositivePopup
指令)
[...]
scope: {
type: '=',
action: '=',
data: '='
}
[...]
然后,用于bitFalsePositivePopup
指令的html模板显示data
一些属性。
现在,我触发弹出窗口的方式如下:
bitPopup
指令的指令内部的模板中,我将更改$scope.popup
的type
, action
和data
。 $scope.$broadcast('showPopup');
$scope.$on('showPopup', [...]});
bitPopup
指令将作出反应$scope.$on('showPopup', [...]});
并使弹出窗口可见。 现在,这确实很奇怪,发生在第一次尝试的地方(弹出窗口打开并显示了正确的data
信息),但是在第一次尝试之后,它将显示先前尝试的data
。
现在更奇怪的是,我第一次尝试记录信息时发现:
$scope.$broadcast('showPopup');
之前,在index.html上的 $scope.popup
$scope.$broadcast('showPopup');
显示正确的信息。 bitPopup
指令处的$scope.data
显示null
bitFalsePositivePopup
指令处的$scope.data
显示正确的信息。 在第二次尝试:
$scope.popup
再次正确。 bitPopup
指令处的$scope.data
显示上一次尝试的信息 bitFalsePositivePopup
指令也是bitFalsePositivePopup
。 另一个奇怪的事情是,当我使用$scope.$apply()
可以正常工作时,仅显示$apply already in progress
错误。 我知道在这种情况下不应该使用$scope.$apply()
,因为这都是Angular事件。 但是,传递的范围怎么可能总是落后一步呢?
首先我做错了什么吗?
编辑:
由于amahfouz的回答,我决定发布更多代码进行澄清。 我省略了一些不重要的细节,以使阅读更加清晰。
的index.html
<div class="falsePositives" ng-controller="falsePositives">
<i class="fa fa-minus color-red" ng-click="triggerPopup('falsePositive', 'delete', {detection: getDetection(row.detection, row.source), source: row.source, triggers: row.triggers, hash: row.hash, date: row.date})"></i>
<i class="fa fa-pencil" ng-click="triggerPopup('falsePositive', 'edit', {detection: getDetection(row.detection, row.source), source: row.source, triggers: row.triggers, hash: row.hash, date: row.date})"></i>
<bit-popup type="popup.type" action="popup.action" data="popup.data"></bit-popup>
</div>
index.js
var app = require('ui/modules').get('apps/falsePositives');
app.controller('falsePositives', function ($scope, $http, keyTools, bitbrainTools, stringTools) {
function init() {
$scope.getDetection = getDetection;
$scope.popup = {
type: null,
action: null,
data: null
};
}
function getDetection(hash, source) {
return {
'ids': 'BitSensor/HTTP/CSRF',
'name': 'CSRF Detection',
'description': 'Cross domain POST, usually CSRF attack',
'type': [
'csrf'
],
'severity': 1,
'certainty': 1,
'successful': false,
'input': ['s'],
'errors': []
};
}
$scope.triggerPopup = function (type, action, data) {
$scope.popup = {
type: angular.copy(type),
action: angular.copy(action),
data: angular.copy(data)
};
test();
$scope.$broadcast('showPopup');
};
function test() {
console.log('$scope.popup: ', $scope.popup);
}
}
popup.html
<div class="pop-up-back" ng-click="hidePopup()" ng-class="{visible: visible}"></div>
<div class="pop-up" ng-class="{visible: visible}" ng-switch="type">
<bit-false-positive-popup ng-switch-when="falsePositive" type="type" action="action" data="data"></bit-false-positive-popup>
</div>
popup.js
var app = require('ui/modules').get('apps/bitsensor/popup');
app.directive('bitPopup', function () {
return {
restrict: 'E',
template: html,
scope: {
type: '=',
action: '=',
data: '='
},
controller: function ($scope) {
$scope.visible = false;
$scope.$on('showPopup', function () {
console.log('$scope.data: ', $scope.data);
$scope.visible = true;
});
$scope.$on('hidePopup', function () {
hidePopup();
});
function hidePopup() {
$scope.visible = false;
}
$scope.hidePopup = hidePopup;
}
};
});
false_positives.js
var app = require('ui/modules').get('apps/bitsensor/falsePositives');
app.directive('bitFalsePositivePopup', function () {
return {
restrict: 'E',
template: html,
scope: {
type: '=',
action: '=',
data: '='
},
controller: function ($scope, objectTools, bitbrainTools, keyTools) {
function init() {
console.log('$scope.data @ fp: ', $scope.data);
}
function hidePopup() {
$scope.data = null;
$scope.$emit('hidePopup');
}
$scope.$on('showPopup', function () {
init();
});
init();
$scope.hidePopup = hidePopup;
}
}
}
如果没有其余代码,我只能猜测:您要么需要在显示弹出窗口时使用Promise,要么使用$ apply服务对弹出窗口的可见性进行更改。
在$ timeout中包围您的$ broadcast事件,如下所示:
$timeout(function() {
$broadcast('eventName');
});
它将等待$ scope更新,然后触发事件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.