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

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}} 没有改变的原因是因为该变量被分配给了不同的控制器。如果您从 <div class="main-container col-lg-12 col-md-12 col-sm-12 col-xs-12" ng-controller="main"> 中删除 ng-controller，它应该可以正常工作。

我建议下载像 angular inspector 这样的扩展，这样您就可以查看示波器并查看它们包含的内容。

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

function change $scope variable , but do not update the value outside the function?

javascript

scope

angularjs

angularjs-ng-click