範圍函數中的角度修改範圍屬性

我現在正在使用角度，因爲現在有1個星期，我遇到一個奇怪的行爲（我不知道爲什麼我之前沒有看到它，因爲它看起來像一個非常基本的錯誤）。我有一個控制器讓我們說定義兩個範圍函數：foo（）和bar（）和一個對象「var myVar = 5」的HomeController，我想改變foo（）中myVar的值，並寫它在bar（）中的內容。範圍函數中的角度修改範圍屬性

問題是，它看起來像foo（）不會修改myVar。我還沒有意識到角度範圍，以及它們如何相互作用，但我認爲foo（）中的$ scope是一個不同的範圍，是實際控制器範圍的副本。所以修改它不會修改控制器。

但我怎麼能做到這一點？

編輯：將所有使用的代碼

編輯2：添加plunker：http://plnkr.co/edit/DGzw0UxjBeND3hQWK3o3

這裏是我的index.html

<!-- index.html --> 
<!DOCTYPE html> 
<html> 
<head> 

    <!-- CSS --> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css"> 


    <!-- JS --> 
    <script src="http://code.angularjs.org/1.2.13/angular.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"></script> 


    <!-- Loading angular App --> 
    <script src="app.js"></script> 

    <!-- Loading angular controllers --> 
    <script src="homeController.js"></script> 

</head> 


<body ng-app="TemplateApp"> 
    <div ng-view></div> 
</body> 
</html>

app.js：

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

app.config(function($routeProvider) { 

    $routeProvider 
     .when('/', { 
      templateUrl: 'home.html', 
      controller: 'homeController' 
     }) 

});

home.html的：

<div class="row"> 
    <div class="col s6"> 
     <a class="btn" href="#" ng-click="foo()">call foo</a> 
    </div> 
    <div class="col s6"> 
     <a class="btn" href="#" ng-click="bar()">call bar</a> 
    </div> 
</div>

最後homeController.js：

angular.module('TemplateApp').controller('homeController', [ '$scope', function($scope) { 

    $scope.myVar = 5; 

    $scope.foo = function() { 
     $scope.myVar = 10; 

     console.log($scope.myVar); // display 10 
    }; 

    $scope.bar = function() { 
     console.log($scope.myVar); // display 5 Should be 10 
    }; 
}])

感謝

來源

2017-06-12 Nicolas Pretot

據我所知，在當前代碼中，如果你在「bar」之前觸發「foo」，它應該按照你的計劃完成......我想你的問題比深度更簡單，並且與深度無關了解範圍 – happyZZR1400

你需要分享你的觀點代碼，以瞭解你到底做了什麼。 –

我添加了我的代碼和一個運動員 –

從你plunker後點擊：

<div class="row"> 
    <div class="col s6"> 
     <a class="btn" href="#" ng-click="foo()">call foo</a> 
    </div> 
    <div class="col s6"> 
     <a class="btn" href="#" ng-click="bar()">call bar</a> 
    </div> 
</div>

你可點擊的鏈接中包含href="#"重新加載頁面的狀態和重置你的範圍變數，這就是爲什麼巴（）總是能看到值= 5。刪除它們應該可以解決你的問題。

來源

2017-06-12 18:22:19 geofrey

好吧，正如我所說的那樣，這是一個愚蠢而且很基本的錯誤:)。這是工作，謝謝！ –

$scope.myVar只會更新時$scope.foo()方法首先被調用。這些快速的解答

angular.module('TemplateApp').controller('homeController', [ '$scope', function($scope) { 

    $scope.myVar = 5; 

    $scope.foo = function() { 
     $scope.myVar = 10; 

     console.log($scope.myVar); // display 10 
    }; 

    $scope.bar = function() { 
     console.log($scope.myVar); // display 5 , I would like 10 there 
    }; 


    $scope.foo(); 
    $scope.bar(); 
}])

來源

2017-06-12 10:06:38

坦克：

檢查下面的代碼，它應該顯示10。

事實上，我沒有從我的控制器調用這些函數。

我在那裏我定義了兩個按鈕，第一

調用了foo 通話酒吧

當然，我點擊「呼叫foo」的BTN第一，那麼「呼叫欄」

的視圖文件

來源

2017-06-12 10:16:14

我置於其中觸發每一個其功能兩個按鈕：

<button ng-click="foo()">foo</button> 
<button ng-click="bar()">bar</button>

看看這個plunker - 它顯示10時「酒吧」，「富」

來源

2017-06-12 10:22:20 happyZZR1400

範圍函數中的角度修改範圍屬性

回答

相關問題