Javascript 在没有$scope的情况下修改作用域无效。$apply
我有一个按钮的指令,当点击它时会显示一个加载屏幕Javascript 在没有$scope的情况下修改作用域无效。$apply,javascript,angularjs,Javascript,Angularjs,我有一个按钮的指令,当点击它时会显示一个加载屏幕 angular.module('randomButton', ['Data']) .directive('randomButton', function(Data) { return { scope: '=', restrict: 'A', templateUrl: 'templates/components/randomButton.html', link: funct
angular.module('randomButton', ['Data'])
.directive('randomButton', function(Data) {
return {
scope: '=',
restrict: 'A',
templateUrl: 'templates/components/randomButton.html',
link: function(scope, element, attrs){
element.click(function(){
scope._loading();
});
}
}
});
它通过在不同指令中包含的作用域上调用另一个函数来实现这一点:
angular.module('quoteContainer', [])
.directive('quoteContainer', function(Data) {
function quoteController($scope){
$scope._loading = function(){
console.log('loading');
$scope.loadMessage = Data.getRandomText();
$scope.loading = true;
};
}
return {
scope: '=',
restrict: 'A',
templateUrl: 'templates/components/quoteContainer.html',
controller: ['$scope', quoteController],
link: function(scope,element,attrs){
}
}
});
我的问题是,要进行此更改,我必须在\u load()
函数中调用$scope.$apply
。例如:
$scope._loading = function(){
console.log('loading');
$scope.$apply(function(){
$scope.loadMessage = Data.getRandomText();
$scope.loading = true;
});
};
我知道这是一种不好的做法,应该只在与其他框架/ajax调用等进行交互时使用。那么,为什么我的代码在没有
$scope.$apply.
的情况下会拒绝工作,没有它我如何才能工作呢?基本上,您需要让angular知道发生变化的某种方式,因为它位于异步事件处理程序中,angular通常用于注意更改的机制不适用于它
因此,需要将其包装在$apply
中,这将在代码运行后触发摘要循环,从而使angular有机会根据新数据进行更改。但是,实现这一点的首选方法是使用angular的内置服务,该服务有效地实现了相同的功能(即将代码包装在$apply
块中),但不会出现触发其他摘要循环时可能正在进行的问题
您可以使用与当前使用$apply相同的方法:
$timeout(function(){
$scope.loadMessage = Data.getRandomText();
$scope.loading = true;
});
(如果您确实想延迟值的应用,可以使用第二个参数,但在您的情况下这不是必需的。)尝试使用角度功能,例如
ng click
指令,而不是jquery(click()
),因此每次我想要修改作用域上的变量时(不被监视)我得打$timeout?这似乎是一种非常奇怪的做法。只有当更改的来源在angular框架之外时(在本例中,是浏览器交互)。当您对$scope函数进行“常规”调用时,angular将知道更改并更新视图,而无需$timeout或$apply-这应该是大多数情况下的情况,$timeout是奇数。啊,感谢您为我澄清这一点!所以,为了确保我得到了它,外部更改意味着我应该使用$timeout,内部更改应该得到处理?