我正在尝试制作我的第一个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-controllerin<div id="pagewrapper" class="container">而不是的第一个div view1.html，但这没什么区别。
我将导航栏（包含输入和按钮）局部放置，并为此创建了新指令。而不是将导航栏放在index.htmlI中，而是将其放在各个部分中，现在可以正常使用了。我怀疑问题与不同的范围有关。
导航栏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>了每个想要导航栏的视图。谢谢大家，您的帮助将我推向正确的方向。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句