0
免責事項、私は角のnoobです。ビューはいつ更新する必要があります
私が過去数時間にわたってやってみたいことは、認証が真であるかどうかによってユーザー情報またはサインインイメージを表示するボタンをクリックするだけで、サービスでの認証を切り替えることです。ページが読み込まれたときに正しい情報が表示されますが、ボタンをクリックするとビューが再更新されません。ちょうど楽しみのために、私はバインディングが機能していたかどうかを見るためにユーザー情報のユーザー名にバインドされた入力フィールドを追加しました。私は予想通りにユーザー名を更新することができましたが、私は奇妙な結果に気付きました。認証ボタンを切り替えると何も変わりませんが、入力ボックスからユーザー名を更新しようとすると、ビューが更新されます。変更は認証に行われていますが、何らかの理由で反映されていないだけです。
これに関するお手伝いがあれば幸いです。
var app = angular.module("appMain", []);
app.service("userInformation", [function() {
this.authentacation = true;
this.username = "user";
this.balance = "10.00";
this.avatar = "http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/81/81322ac9812dad58e9525a010c76bcf4e585d820.jpg";
this.toggleAuthentacation = function() {
this.authentacation = !this.authentacation;
console.log(this.authentacation);
};
}]);
app.controller("headerController", ["$scope", "userInformation", function($scope, userInformation) {
$scope.userInformation = userInformation;
console.log($scope.userInformation);
document.getElementById("btn1").addEventListener("click", function() {
userInformation.authentacation = ! userInformation.authentacation;
$scope.userInformation = userInformation;
console.log($scope.userInformation);
});
}]);<!DOCTYPE html>
<html>
<link rel="stylesheet" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="appMain">
<header ng-controller="headerController">
<img id="logo" src="/img/logo.png">
<div id="userInfo" ng-show="userInformation.authentacation">
<ul>
<li>Hello {{userInformation.username}}!</li>
<li>Balance: ${{userInformation.balance}}</li>
<li><img id="avatar" src="{{userInformation.avatar}}" /></li>
</ul>
</div>
<div id="userInfo" ng-hide="userInformation.authentacation">
<ul>
<li><img src="https://steamcommunity-a.akamaihd.net/public/images/signinthroughsteam/sits_01.png"></li>
</ul>
</div>
<button id="btn1">Button1</button>
<input type="text" ng-model="userInformation.username">
</header>
</body>
</html>
あなたのボタンが何もしていません。それは単純なオールのボタンです。 'ng-click'を使って' toggleAuthentacation'関数に接続したいでしょう。 – Ladmerc
ボタンは実際には値を更新しており、headerControllerで役割を割り当てられています。私はそれがconsole.logと一緒に働いていることを確認しました – AllAnimals
@Ladmercこれ以上の調査では問題でした！ ng-clickで呼び出されたコントローラに関数を追加しました。この関数は、ビューを即座に更新しました。あなたは命の恩人です！ – AllAnimals