Question

免责声明，我是一个有角度的菜鸟。

因此，过去几个小时我一直试图通过点击按钮来切换我的服务中的身份验证，该按钮应显示用户信息或登录图像，具体取决于身份验证是否为真。它在页面加载时显示正确的信息，但在单击按钮时不会重新更新视图。为了好玩，我添加了一个输入字段，该字段绑定到用户信息用户名以查看绑定是否正常工作。我可以按预期更新用户名，但我注意到一个奇怪的结果。如果我切换身份验证按钮没有任何更改，但当我尝试通过输入框更新用户名时视图将更新。正在改变认证，但是由于某种原因没有反映出来。

对此的任何帮助将不胜感激。

＆＃13;

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);
    });

}]);

＆＃13;

<!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>

＆＃13;

Answer 1

事件处理程序需要与AngularJS框架及其摘要周期集成。
ng-click directive会自动执行此操作。

Angular通过提供自己的事件处理循环来修改正常的JavaScript流。这将JavaScript拆分为经典和Angular执行上下文。只有在Angular执行上下文中应用的操作才会受益于Angular数据绑定，异常处理，属性监视等

--AngularJS Developer Guide v1.1 - Concepts - Runtime

Answer 2

编辑：我解决了这个问题，没有通过document.getElementById将函数绑定到按钮，而是在控件中创建一个函数，我在html中使用ng-click绑定。

app.controller("headerController", ["$scope", "userInformation", function($scope, userInformation) {
    $scope.userInformation = userInformation;
    console.log($scope.userInformation);


    $scope.toggleAuthentacation = function() {
      userInformation.authentacation = ! userInformation.authentacation;
      $scope.userInformation = userInformation;
      console.log($scope.userInformation);
    };

}]);

<button id="btn1" ng-click="toggleAuthentacation()">Button1</button>

查看不应该更新的时间

2 个答案: