2014-11-03 53 views
3

我在頁面上有兩個按鈕,基本上做同樣的事情。按鈕1檢索一個字符串並將其輸出到一個div。按鈕2檢索相同的字符串並將其輸出到同一個div,但它也檢索狀態碼。每頁重新加載只能按一個按鈕。這裏是我的控制器的一個削減版本:AngularJS ng-show是真實的,但顯示:沒有遺蹟

angular.module('myModule', []).controller('myController', [ '$scope', function($scope) { 
    self = this; 
    this.loaded = false; 
    this.msg = ''; 

    this.getMessage = new Object(blah...); 
    this.getMessage.success = function(data) { 
    self.loaded = true; 
    self.msg = data.msg; 
    $scope.$apply(function() { 
     self; 
    }); 
    }; 

    this.getStatus = new Object(blah...); 
    this.getStatus.success = function() { 
    self.getMessage(); 
    }; 

    this.button1.click(function() { 
    $.ajax(self.getMessage); 
    }); 

    this.button2.click(function() { 
    $.ajax(self.getStatus); 
    }); 
}]); 

我使用jQuery的AJAX調用,因爲我從jQuery的遷移到角,和我從前方工作到後面讓所有的jQuery淘汰。到目前爲止,我的網頁看起來是這樣的:

<DOCTYPE html> 
<html> 
<head> 
    <!-- js/css inclusions --> 
</head> 
<body> 
    <div ng-controller='myController as ctrl'> 
    <div ng-show='ctrl.loaded' ng-bind='ctrl.msg'></div> 
    </div> 
</body> 
</html> 

在頁面加載,我的DIV是這樣的:

<div class='ng-hide' 
ng-show='ctrl.loaded' 
ng-bind='ctrl.msg' 
style='display: none'></div> 

當點擊按鈕1,我的DIV變爲:

<div class='' 
ng-show='ctrl.loaded' 
ng-bind='ctrl.msg' 
style=''>Message Here.</div> 

當按鈕2被點擊時,我的div變成:

<div class='' 
ng-show='ctrl.loaded' 
ng-bind='ctrl.msg' 
style='display: none'>Message Here.</div> 

這個div並不是我的樣式,只是Angular的默認CSS來顯示/隱藏東西。我的問題是:我做錯了什麼?是否有某種我沒有看到的範圍問題?還有一些我沒有正確做的事情(角度方式)?

編輯:注入$scope服務到我的控制器,但仍然相同的結果。

回答

2

由於HTTP調用正在使用jQuery作出使用角$http服務代替,角不知道你loaded參數發生變化,因此不更新視圖。

將代碼封裝在如下所示的$scope.$apply塊中的成功回調中,以便Angular知道當您對參數進行更改時需要更新視圖範圍。您還需要將$scope服務注入您的控制器。

this.getMessage.success = function(data) { 
    $scope.$apply(function() { 
     self.loaded = true; 
     self.msg = data.msg 
    }); 
}; 

此外,你應該使用$scope服務注入到PARAMS您的看法 - 這就是它的存在了。

+0

在你的問題中你的編輯代碼你目前在你的控制器中得到了什麼?如果是這樣,請使用我提供的代碼(即:將參數設置移動到'$ apply'塊中)。 – 2014-11-03 19:14:18

+0

我將參數設置移動到'$ apply'塊中,但結果仍然相同...按鈕1顯示消息,但按鈕2不允許刪除「display:none」。 – wikenator 2014-11-03 19:17:47

+0

好的。可能Angular的內部工作需要在'$ scope'服務上設置參數,而不是控制器本身,以便在視圖和控制器之間形成綁定。例如:'$ scope.loaded'而不是'this.loaded'。在你的視圖中使用它,只需'加載' - 你不需要'$ scope'前綴('ng-show =「loaded」')。 – 2014-11-03 20:02:36

相關問題