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