Angularjs ngClass工作不正確或他的工作方式？

爲什麼納克級不與工作範圍VAR的Angularjs ngClass工作不正確或他的工作方式？

sheikContolls.controller('MainPageController', ['$scope', 'authService', 
    function ($scope, authService) { 
     if(!authService.isAuthenticated()){ 
      $scope.class1 = "good"; 
     } 
     else { 
      $scope.class1= "bad"; 
     } 
    } 
    ]);

HTML：

<div class="demo" ng-class="class1"></div>

當你第一次啓動類添加和我們班=「演示好」，但如果再isAuthenticated（）返回true，類不改變，爲什麼？相同的下一個HTML：

<div class="demo {{class1}}"></div>

如果我做了一個功能 - 所有的工作都很完美。

<div class="demo" ng-class="getClass()"></div>

來源

2015-05-07 Alexandr Kovalenko

您必須有[某種指令（'ng-if，ng-repeat等......'）創建一個子作用域]（http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical- inheritance-in-angularjs）包裝這個div。 – PSL

你能告訴我們'getClass'嗎？ –

控制器中的代碼時，控制器被實例化，不會再後來只調用一次，所以它永遠不會再次檢查authService.isAuthenticated()。

當你在你的HTML代碼中使用一個函數時，這個函數被正確地調用並觀察它的結果，所以稍後的修改將被應用。

你可以在控制器中移動詳細登記，並從HTML調用它的一些封裝：

sheikContolls.controller('MainPageController', ['$scope', 'authService', 
    function ($scope, authService) { 
     $scope.isAuthenticated = function(){ 
      return authService.isAuthenticated(); 
     }; 
    } 
]); 

<div class="demo" ng-class="{good: isAuthenticated(), bad: !isAuthenticated() }"></div>

來源

2015-05-07 15:47:05 hoeni

當你使用'ng-class =「class1」'時，'class1' getter被自動創建並被監視。所以調用'getClass（）'或'isAuthenticated（）'確實沒有區別。因此，如果範圍中的所有class1屬性隨時更新，則下一個摘要循環也將更新ng-class表達式。其實我覺得問題可能隱藏在一些範圍問題的背後？但是，你認爲OP可能不會像他認爲的那樣調用isAuthenticated（），或者至少他沒有向我們展示那一部分。 – PSL

@PSL我試着在我的回答中說這個，但可能沒有雄辯。「class1」在他的當前應用程序中永遠不會改變，所以它被監視或者摘要循環發生的事實並不意味着什麼 - 它仍然是「好」的。摘要循環將不得不再次運行'isAuthenticated' * *，這需要將其綁定到作用域。 –

@ExplosionPills是的我同意，實際上它是令人困惑的是，期望這是認證（'，但如果然後isAuthenticated（）返回true）將被自動調用，直接將其放置在構造函數中。 Bu OP表示它在'getClass（）中使用時是有效的「OP只是返回類或評估表達式（如您所示）？問題中可能有一些相關的部分不存在？ – PSL

authService.isAuthenticated沒有被綁定到的範圍，控制器定義功能只運行一次，所以最初class1是good，但該功能從不再運行。

您必須以某種方式將isAuthenticated綁定到範圍才能使其工作。我可能會考慮樣結合到被授權完成後更新authService值的替代解決方案，但在此期間，你可以這樣做：

$scope.getClass = function() { 
    if (authService.isAuthenticated()) { 
     return "bad"; 
    } 
    return "good"; 
};

http://plnkr.co/edit/1xFRoTusNLHXeIhosGOp?p=preview

來源

2015-05-07 15:52:28

不，控制器運行tiwce，這不是所有的代碼在第二次isAuthenticated（）== true。是的函數getClass工作完美，但是爲什麼類不僅僅隨函數而變化？我想在範圍內使用變量來改變類，而不是使用函數！ –

Angularjs ngClass工作不正確或他的工作方式？

回答

相關問題