AngularJS视图不更新答案

【问题标题】：AngularJS view not updatingAngularJS视图不更新
【发布时间】：2015-03-17 13:00:37
【问题描述】：

我正在尝试制作我的第一个 AngularJS 应用程序，但遇到了问题。

我有一个意见：

<input ng-model="userNameLogin" type="text" placeholder="username" class="form-control">

一个按钮：

<button ng-click="setActiveUser()" type="submit" class="btn btn-success">Sign in</button>

还有一个表达式：

{{ activeUser }}

单击按钮后，我希望文本更改为输入中输入的内容。为此，我有以下控制器：

app.controller('View1Ctrl', ['$scope', function($scope) {
    $scope.userNameLogin = "";
    $scope.activeUser = "Test";

    $scope.setActiveUser = function() {
        $scope.activeUser = $scope.userNameLogin;
        console.log($scope.activeUser);
    };
}]);

初始值“Test”显示得很好，根据控制台，“activeUser”的值也被正确更改。但是视图中的文本保持不变。

我见过类似的问题，其中$scope.$apply() 是答案，但如果我在console.log 之后添加它，我会得到

“错误：[$rootScope:inprog] $apply 已经在进行中”。

我在这里错过了什么？

编辑：

我注意到，如果我将输入、按钮和表达式放在同一个 HTML 文件中，则一切正常。但是我的输入和按钮位于index.html 的导航栏中，而表达式位于view1.html

这是index.html的正文：

    <body ng-app="myApp.view1">
<nav class="navbar navbar-inverse navbar-fixed-top" ng-controller="View1Ctrl as view">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#/view1">Kwetter</a>
        </div>
        <div class="navbar-collapse collapse" >
            <ul class="nav navbar-nav">
                <li><a href="#/view1">Home</a></li>
                <li><a href="#/view2">Profile</a></li>
            </ul>
            <form class="navbar-form navbar-right">
                <div class="form-group">
                    <input ng-model="userNameLogin" type="text" placeholder="username" class="form-control">
                </div>
                <div class="form-group">
                    <input type="password" placeholder="password" class="form-control">
                </div>
                <button ng-click="setActiveUser()" type="submit" class="btn btn-success">Sign in</button>
            </form>
        </div>
    </div>
</nav>
<div id="pagewrapper" class="container">

    <div ng-view></div>

    <div>Angular seed app: v<span app-version></span></div>
</div>

这是我的view1.html

    <div ng-controller="View1Ctrl as view">
<!-- row 1: welcome -->
<div class="row">
    <div class="col-md-12 pull-left">
        <image ng-src="{{ view.users[0].avatar }}"/>
        <!-- If I put the button and input here it will work -->
        <input ng-model="userNameLogin" type="text" placeholder="username" class="form-control">
        <button ng-click="setActiveUser()" type="submit" class="btn btn-success">Sign in</button>
        {{ activeUser }}
    </div> 
</div>
<!-- row 2: main content -->
<!-- left the rest of the content out because it would just clutter the page -->

我尝试将 ng-controller 放在 <div id="pagewrapper" class="container"> 中，而不是 view1.html 的第一个 div 中，但这没有任何区别。

【问题讨论】：

可能是你把{{ activeUser }}放在了控制器div之外
感谢您的建议，pankajparker。我查了一下，事实并非如此。
Ben Felda，“文本保持不变”我的意思是它说“测试”，即使在单击按钮之后也是如此。
控制台是否显示了您的预期？
我只是按原样运行了你的代码，它运行良好，我倾向于同意第一个评论并说 {{ activeUser }} 不在你定义的元素中 ng-控制器="View1Ctrl"

标签： javascript angularjs

【解决方案1】：

我认为你放错了按钮、文本框或表达式，注意：这些应该在 ng-controller 中。请试试这个，它会工作的

<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app">
    <div ng-controller="View1Ctrl">
      <input ng-model="userNameLogin" type="text" placeholder="username" class="form-control">
      <button ng-click="setActiveUser()" type="submit" class="btn btn-success">Sign in</button>
      {{activeUser}}
    </div>
    <h1>Hello Plunker!</h1>
  </body>

</html>

script.js 代码

var app = angular.module("app",[]);


app.controller('View1Ctrl', ['$scope', function($scope) {
    $scope.userNameLogin = "";
    $scope.activeUser = "Test";

    $scope.setActiveUser = function() {
        $scope.activeUser = $scope.userNameLogin;
        console.log($scope.activeUser);
    };
}]);

参考http://plnkr.co/edit/ixbByBQ9nGm4XEqEFi4t?p=preview

【讨论】：

【解决方案2】：

您直接在$scope 上拥有属性，这会破坏绑定。而是尝试：

app.controller('View1Ctrl', ['$scope', function($scope) {
    $scope.userInfo = {
        userNameLogin: "",
        activeUser:"Test"
    }
    $scope.setActiveUser = function() {
        $scope.uesrInfo.activeUser = $scope.userInfo.userNameLogin;
        console.log($scope.activeUser);
    };
}]);

在您看来： {{userInfo.activeUser}}

来自 Egghead.io https://egghead.io/lessons/angularjs-the-dot

【讨论】：

【解决方案3】：

在您的代码中，我看不到导致问题的任何原因。我做了一个小提琴，这表明你的代码有效：

http://jsfiddle.net/xxvsn8xs/

您当然需要声明ng-app和ng-controller，就像在小提琴中一样，才能让应用程序完全运行。

此外，如果设置 activeUser 实际发生在角度范围之外，可能不会发生视图更新，这可能在外部库或其他任何地方。确实，这些可以通过直接调用 $scope.$apply() 来实现，但也不推荐这样做，因为摘要可能已经在进行中。您的代码就是这种情况，这就是您收到相应错误消息的原因。

改为使用带有回调和 0 延迟的 angulars $timeout 服务，将值应用于 $scope.activeUser。 $timeout 将检查摘要周期是否正在进行，如果没有，将开始一个。

$scope.setActiveUser = function() {
  $timeout(function () {
    $scope.activeUser = $scope.userNameLogin;
    console.log($scope.activeUser);
  });
};

别忘了在你的控制器依赖中定义$timeout：

 app.controller('View1Ctrl', ['$scope', '$timeout', function($scope, $timeout) {

【讨论】：

【解决方案4】：

Angular 会监视您绑定到 $scope 的变量，但如果您替换该变量，Angular 将无法检测到它。这就是为什么 $apply 会是一个建议。

另一个建议是将变量绑定到“模型”变量：

app.controller('View1Ctrl', ['$scope', function($scope) {
    $scope.userNameLogin = "";
    $scope.myData = { activeUser: "Test" };

    $scope.setActiveUser = function() {
        // Angular will pick up the change in the myData object, and will update all variables attached to it
        $scope.myData.activeUser = $scope.userNameLogin; 
        console.log($scope.myData.activeUser);
    };
}]);

查看：

{{ myData.activeUser }}

【讨论】：

【解决方案5】：

您是否在 Apache 中执行您的应用程序？我在使用 file:// 时遇到了同样的问题，我通过使用 localhost 解决了我的问题。

【讨论】：

【解决方案6】：

我将我的导航栏（包含输入和按钮）放在一个部分中，并为其创建了一个新指令。我没有将导航栏放在index.html 中，而是将它放在单独的部分中，现在它可以正常工作了。我怀疑这个问题与不同的范围有关。

导航栏html：

        <a class="navbar-brand" href="#/view1">
            Kwetter
            <image id="navbar-image" src="src/kwetter_logo.png"/>                    
        </a>
    </div>
    <div class="navbar-collapse collapse" >
        <ul class="nav navbar-nav">
            <li><a href="#/view1">Home</a></li>
            <li><a href="#/view2">Profile</a></li>
        </ul>
        <form class="navbar-form navbar-right">
            <div class="form-group">
                <input ng-model="userNameLogin" type="text" placeholder="username" class="form-control">
            </div>
            <div class="form-group">
                <input type="password" placeholder="password" class="form-control">
            </div>
            <button ng-click="setActiveUser()" type="submit" class="btn btn-success">Sign in</button>
        </form>
    </div>
</div>

指令：

    app.directive('navbar', function() {
return {
    restrict: 'E',
    templateUrl: 'partials/navbar.html',
    controller: 'View1Ctrl as view'
}

});

然后我将<navbar></navbar> 添加到我想要导航栏的每个视图中。谢谢大家，你们的帮助把我推向了正确的方向。

【讨论】：