Question

	// 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

Answer 1

您在页面上两次引用同一个控制器。

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

单击按钮时{{showFilter}}未更改的原因是因为该变量已分配给其他控制器。如果您从ng-controller中移除<div class="main-container col-lg-12 col-md-12 col-sm-12 col-xs-12" ng-controller="main">，它应该可以正常工作。

我建议下载像角度检查器这样的扩展程序，以便您可以查看范围并查看它们包含的内容。

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

1 个答案: