gpt4 book ai didi

javascript - Angular - Controller 函数调用中的范围变量更新不会反射(reflect)在指令 html 中

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:16:02 24 4
gpt4 key购买 nike

我一直在研究 Angular,试图了解它如何管理作用域,然后我发现我无法使用函数调用更新指令中的变量。

为了说明这个问题,这是我的简单应用程序:这个想法是,当您点击切换链接时,菜单应该出现,当您再次点击它或其他地方时,菜单应该消失。

angular.module('app', [])
.controller('DemoController', ['$scope', function($scope) {

}])
.directive('dropdown', function() {
return {
restrict: 'E',
transclude: true,
controller: function($scope) {
$scope.onBlur = function () {
// this doesn't actually work
$scope.showMenu = false;
};
},
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body id="body" ng-app="app" ng-controller="DemoController">
<dropdown ng-transclude>
<a href="#" ng-click="showMenu = !showMenu" ng-blur="onBlur()">Toggle</a>
<menu ng-show="showMenu">
<div>I'm</div>
<div>the drop-down</div>
<div>menu</div>
</menu>
</dropdown>
</body>

这是我的 plunker 链接:

非工作版本: http://plnkr.co/edit/rfdt5FEoGAOX15RZUsKA?p=preview

工作版本: http://plnkr.co/edit/xMANGDVa8n64OKK3gOgg?p=preview

工作版本和另一个之间的区别在于工作版本只是使用 ng-blur="showMenu = false" 而不是调用函数。如果我在 Controller 函数中调用 $scope.$apply(),那么我将得到“$apply already in progress”异常。

我想我一定在这里遗漏了一些东西,但我现在不知道为什么。提前致谢。

最佳答案

关于 $scope.$apply() 函数的第一件事是只有当 $scope.$$phase 为空时才能调用它(确保它不在 $digest 或 $apply 阶段)

if (!$scope.$$phase) {
$scope.$apply()
}

在你的第一个 plunker 中只改变这个:

$scope.showMenu = false;
to
this.showMenu = false;

它的in function和function已经是$scope bind了。

关于javascript - Angular - Controller 函数调用中的范围变量更新不会反射(reflect)在指令 html 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30725094/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com