Question

我正在尝试制作我的第一个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] $已在进行中”。

我在这里缺少什么？

编辑：

我注意到如果我将输入，按钮和表达式放在同一个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中，但这没有任何区别。

Answer 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

Answer 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

Answer 3

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

http://jsfiddle.net/xxvsn8xs/

您需要声明ng-app和ng-controller当然，就像在小提琴中一样，让应用程序完全正常工作。

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

而是使用带有回调和0延迟的角度$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) {

Answer 4

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

另一个建议是将变量绑定到'model'变量：

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

Answer 5

您是否在Apache中执行应用程序？我在使用file时遇到了同样的问题：//我使用localhost修复了我的问题。

Answer 6

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

navbar 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>添加到我想要导航栏的每个视图中。谢谢大家，你的帮助把我推向了正确的方向。

AngularJS视图不更新

6 个答案: