當ng-click函數被觸發時更改$ scope值

我嘗試更改angularjsng-click函數中的$ scope變量。但angularjs似乎無法做到這一點。

下面是我的代碼在我的appController：

// appController.js 

$scope email = "[email protected]"; 

$scope.emailInfo = "[email protected]"; 

//emailOnClick() is a ng-click on DOM. It will be triggered when the user click a button, which is to save his email information 

$scope.emailOnClick = function() { 

    $scope.email = $scope.emailInfo; 

    console.log($scope.email); //this will print "[email protected]". 

}; 

console.log($scope.email); // this will print "[email protected]", but I 

//want it to print "[email protected]" as I triggered the ng-click function to 

//apply the change. 


console.log($scope.emailInfo); //this will print "[email protected]".

我怎麼錯過？任何想法？

來源

2015-10-02 zihaow

它不完全清楚你正試圖在這裏做。在你的代碼中**完全**是這個「全局變量」分配的，你爲什麼試圖做到這一點？全局變量永遠不是好事。 – Claies

您定義了一個點擊事件，但沒有運行它。 –

嘗試通過在控制器中以'$ scope.emailInfo'開始，使用不是''''的默認值，比如'test @ aol.com'，並將其綁定到頁面的某處。一旦你點擊，看看它是否改變它。 – idotpdot

更新時間：

$scope.emailOnClick函數將$scope.emailInfo值賦給變量$scope.email。

如果您單擊「發送到服務器」按鈕，您將看到控制檯中發送的新值。

(function() { 
 
    var app = angular.module("myApp", []); 
 
    app.controller("Controller", ["$scope", 
 
    function($scope) { 
 
     $scope.email = "[email protected]"; 
 
     $scope.emailInfo = "[email protected]"; 
 
     $scope.emailOnClick = function() { 
 
     $scope.email = $scope.emailInfo; // Gets emailInfo value and assigns to $scope.email. 
 
     console.log($scope.email); 
 
     } 
 
     $scope.sendToServer = function() { 
 
     console.log($scope.email); 
 
     }; 
 
     console.log($scope.email); // Initial state of $scope.email printed by default. 
 
     console.log($scope.emailInfo); // Initial state of $scope.emailInfo printed by default. 
 
    } 
 
    ]); 
 
})();

.email { 
 
    background-image: linear-gradient(#FFF, #CCC); 
 
    border: solid 1px #000; 
 
    padding: 10px; 
 
} 
 
.emailInfo { 
 
    background-image: linear-gradient(#FFF, #FBEE95); 
 
    border: solid 1px #000; 
 
    padding: 10px; 
 
} 
 
.option-clicked { 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div data-ng-app="myApp"> 
 
    <div data-ng-controller="Controller"> 
 
    <div class="email">email: <span class="option-clicked">[email protected]</span> 
 

 
    </div> 
 
    <div class="emailInfo">emailInfo: <span class="option-clicked">{{email}}</span> 
 

 
    </div> 
 
    <button data-ng-click="emailOnClick()">Get email</button> 
 
    <button data-ng-click="sendToServer()">Send to the server</button> 
 
    <br />Result: 
 
    <input id="txtEmail" data-ng-model="email" type="text" /> 
 
    </div> 
 
</div>

來源

2015-10-02 22:34:55

是的，我已經試過了。它沒有工作。 – zihaow

我做了一個簡單的演示http://jsfiddle.net/dannyjhonston/8y4h6zx0/ 你可以看看嗎？ –

是的，我在ng-click函數emailOnclick之外定義了$ scope.email =「[email protected]」。當ng-click函數被觸發時，$ scope.email的值將變爲「[email protected]」並打印在控制檯上。但是，如果我將console.log（$ scope.email）放在ng-click之外，它就會回到原來的值。我想知道是否有方法在ng-click函數中更改$ scope.email的值。 – zihaow

您正在定義點擊功能。請嘗試移動console.log內：

$scope.emailOnClick = function() {

來源

2015-10-02 22:31:20

但我希望它能夠在ng-click之後獲得值，以便稍後將「var email」傳遞給服務器。 – zihaow

當ng-click函數被觸發時更改$ scope值

回答

相關問題