我正在尝试制作我的第一个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 }}

我希望文本一旦单击按钮即可更改为在输入中键入的内容。为此,我有以下 Controller :
app.controller('View1Ctrl', ['$scope', function($scope) {
    $scope.userNameLogin = "";
    $scope.activeUser = "Test";

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

初始值“Test”显示得很好,并且根据控制台,“activeUser”的值也已正确更改。但是 View 中的文本保持不变。

我曾在$scope.$apply()是答案的地方看到过类似的问题,但是如果在console.log之后添加它,我会得到



我在这里想念什么?

编辑:

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

最佳答案

我认为您放错了按钮,文本框或表达式的位置,
注意:这些应该在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

关于javascript - AngularJS View 未更新,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29099765/

10-09 18:10
查看更多