javascript - 函数更改 $scope 变量，但不更新函数外部的值？-6ren

javascript - 函数更改 $scope 变量，但不更新函数外部的值？

转载作者：行者123 更新时间：2023-12-03 04:19:44

26

4

	// create the module and name it scotchApp
	var app = angular.module("peykaar",[]);

	
app.controller('main', function($scope , $rootScope ,$location ) {


    /* =========================== TABS =========================== */
    $scope.tab = 1;
    $scope.setTab = function (number) {
       $scope.tab = number;
    }

    $scope.isSetTab = function (tabNum) {
        return $scope.tab === tabNum;
    }
    /* =========================== /TABS =========================== */
    // /* =========================== FILTER ========================== */
    //$scope.flag;
    
    $scope.showFilter = false;
    $scope.toggleFilters = function () {
        $scope.showFilter = !$scope.showFilter;
    }

    


    // /* ========================== /FILTER =========================== */




});

<!DOCTYPE html>
<html ng-app="peykaar">
<head>
	<meta charset="UTF-8">
	<title> Peykaar </title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<!--  Bootstrap Grid System -->
	<link rel="stylesheet" href="sorce/node_modules/bootstrap/bootstrap.min.css">
	<link rel="stylesheet" href="sorce/node_modules/bootstrap/bootstrap-theme.min.css">
	<!-- /Bootstrap Grid System -->
    <link media="all" rel="stylesheet" type="text/css" href="sorce/node_modules/mdi/css/materialdesignicons.min.css">

    <link rel="stylesheet" href="sorce/custom/css/fonts.css">
	<link rel="stylesheet" href="sorce/custom/css/layout.css">
	<link rel="stylesheet" href="sorce/custom/css/main.css">
	<link rel="stylesheet" href="sorce/custom/css/bookmark.css">

</head>
<body  ng-controller="main">
	
<header class="header">
	<div class="logo">LOGO</div>
	<ul class="nav">
		<li><span class="mdi mdi-menu"><!-- mdi-notification-clear-all --></span></li>
		<li><a href="#/bookmark"><span class="mdi mdi-bookmark"></span></a></li>
		<li><span class="mdi mdi-bell"><!-- bell-ring --></span></li>
		<li><button class="mdi mdi-filter" ng-click="toggleFilters()">Click ME</button></li>
	</ul>
</header>
<section class="main-section">
<!-- Main Container -->
<div class="main-container col-lg-12 col-md-12 col-sm-12 col-xs-12" ng-controller="main">
	<!-- LEFT SIDE (Result) -->
	<div class="left-side main-sides results col-lg-7 col-md-7 col-sm-6 col-xs-12">
		<ng-view></ng-view>{{showFilter}}
	</div>
	<!-- LEFT SIDE (Result) -->
	<!-- RIGHT SIDE (FILTERS) -->
	<div class="right-side main-sides filters col-lg-5 col-md-5 col-sm-6 col-xs-12" 
		 ng-class="{'filterOpen': showFilter}">
		
		<!-- TABS NUMBER -->
		<div class="tabs" ng-class="{activeTab : isSetTab(1)}">
			<div class="tabs-content">
				DATA NUMBER 1
			</div>
		</div>

		<!-- TABS NUMBER -->
		<div class="tabs" ng-class="{activeTab : isSetTab(2)}">
			<div class="tabs-content">
				DATA NUMBER 2
			</div>
		</div>

		<!-- TABS NUMBER -->
		<div class="tabs" ng-class="{activeTab : isSetTab(3)}">
			<div class="tabs-content">
				DATA NUMBER 3
			</div>
		</div>

		<div class="tab-locs">
			<span class="tab-num" ng-click="setTab(1)"></span>
			<span class="tab-num" ng-click="setTab(2)"></span>
			<span class="tab-num" ng-click="setTab(3)"></span>
		</div>

	</div>
	<!-- /RIGHT SIDE (FILTERS)-->
</div>
<!-- /Main Container -->
</section>


</body>
<!--  AngularJs Framework and dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


</html>

我这里有一个小问题，ng-click 函数更改函数内的范围值但不会更新此函数之外的范围值。

和 $scope.$apply() 在这里不起作用。非常感谢你们。

var app = angular.module('app', []);


function ctrl($scope, $rootScope, $location) {
  $scope.showFilter = false;
  
  $scope.toggleFilters = function() {
    $scope.showFilter = !$scope.showFilter;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="ctrl">
    <button class="mdi mdi-filter" ng-click="toggleFilters()">when i click this button The false value should be True</button>

    <div ng-class="{'filterOpen': showFilter}" class="left-side main-sides results col-lg-7 col-md-7 col-sm-6 col-xs-12">
      {{showFilter}}
    </div>
  </div>
</div>

Like this Question

最佳答案

您在页面上两次引用同一个 Controller 。

<body ng-controller="main">
<div class="main-container col-lg-12 col-md-12 col-sm-12 col-xs-12" ng-controller="main">

原因{{showFilter}}单击按钮时不会更改是因为该变量已分配给不同的 Controller 。如果删除 ng-controller来自<div class="main-container col-lg-12 col-md-12 col-sm-12 col-xs-12" ng-controller="main">它应该可以正常工作。

我建议下载像 Angular Inspector 这样的扩展，以便您可以查看范围并了解它们包含的内容。

关于javascript - 函数更改 $scope 变量，但不更新函数外部的值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44001425/

26

4

0

文章推荐： JavaScript 装饰器 : How to store function with this scope?

文章推荐： javascript - 粒子的动态文本变化

文章推荐： javascript - 使用AJAX刷新 slider 后如何重新加载flexslider？

详解C语言sscanf()函数、vsscanf()函数、vscanf()函数
C语言sscanf()函数：从字符串中读取指定格式的数据头文件： ?
php - 如何解释at()函数； substr()函数;伪代码中的exist()函数
最近，我有一个关于工作预评估的问题，即使查询了每个功能的工作原理，我也不知道如何解决。这是一个伪代码。下面是一个名为foo()的函数，该函数将被传递一个值并返回一个值。如果将以下值传递给foo函数，
VBS教程：函数-CStr 函数
CStr 函数返回表达式，该表达式已被转换为 String 子类型的 Variant。 CStr(expression) expression 参数是任意有效的表达式。说明通常，可以
VBS教程：函数-CSng 函数
CSng 函数返回表达式，该表达式已被转换为 Single 子类型的 Variant。 CSng(expression) expression 参数是任意有效的表达式。说明通常，可
VBS教程：函数-CreateObject 函数
CreateObject 函数创建并返回对 Automation 对象的引用。 CreateObject(servername.typename [, location]) 参数 serv
VBS教程：函数-Cos 函数
Cos 函数返回某个角的余弦值。 Cos(number) number 参数可以是任何将某个角表示为弧度的有效数值表达式。说明 Cos 函数取某个角并返回直角三角形两边的比值。此比值是
VBS教程：函数-CLng 函数
CLng 函数返回表达式，此表达式已被转换为 Long 子类型的 Variant。 CLng(expression) expression 参数是任意有效的表达式。说明通常，您可以使
VBS教程：函数-CInt 函数
CInt 函数返回表达式，此表达式已被转换为 Integer 子类型的 Variant。 CInt(expression) expression 参数是任意有效的表达式。说明通常，可
VBS教程：函数-Chr 函数
Chr 函数返回与指定的 ANSI 字符代码相对应的字符。 Chr(charcode) charcode 参数是可以标识字符的数字。说明从 0 到 31 的数字表示标准的不可打印的
VBS教程：函数-CDbl 函数
CDbl 函数返回表达式，此表达式已被转换为 Double 子类型的 Variant。 CDbl(expression) expression 参数是任意有效的表达式。说明通常，您可
VBS教程：函数-CDate 函数
CDate 函数返回表达式，此表达式已被转换为 Date 子类型的 Variant。 CDate(date) date 参数是任意有效的日期表达式。说明 IsDate 函数用于判断 d
VBS教程：函数-CCur 函数
CCur 函数返回表达式，此表达式已被转换为 Currency 子类型的 Variant。 CCur(expression) expression 参数是任意有效的表达式。说明通常，
VBS教程：函数-CByte 函数
CByte 函数返回表达式，此表达式已被转换为 Byte 子类型的 Variant。 CByte(expression) expression 参数是任意有效的表达式。说明通常，可以
VBS教程：函数-CBool 函数
CBool 函数返回表达式，此表达式已转换为 Boolean 子类型的 Variant。 CBool(expression) expression 是任意有效的表达式。说明如果 ex
VBS教程：函数-Atn 函数
Atn 函数返回数值的反正切值。 Atn(number) number 参数可以是任意有效的数值表达式。说明 Atn 函数计算直角三角形两个边的比值 (number) 并返回对应角的弧
VBS教程：函数-Asc 函数
Asc 函数返回与字符串的第一个字母对应的 ANSI 字符代码。 Asc(string) string 参数是任意有效的字符串表达式。如果 string 参数未包含字符，则将发生运行时错误。
VBS教程：函数-Array 函数
Array 函数返回包含数组的 Variant。 Array(arglist) arglist 参数是赋给包含在 Variant 中的数组元素的值的列表（用逗号分隔）。如果没有指定此参数，则
VBS教程：函数-Abs 函数
Abs 函数返回数字的绝对值。 Abs(number) number 参数可以是任意有效的数值表达式。如果 number 包含 Null，则返回 Null；如果是未初始化变量，则返回 0。
VBS教程：函数-FormatPercent 函数
FormatPercent 函数返回表达式，此表达式已被格式化为尾随有 % 符号的百分比（乘以 100 ）。 FormatPercent(expression[,NumDigitsAfterD
VBS教程：函数-FormatNumber 函数
FormatNumber 函数返回表达式，此表达式已被格式化为数值。 FormatNumber( expression [,NumDigitsAfterDecimal [,Inc

首页

博学

6Ren·AI

商城

javascript - 函数更改 $scope 变量，但不更新函数外部的值？