Geek Answers Handbook

View AngularJS not updating

I am trying to make my first AngularJS application and I am having a problem.

I have an input:

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

Button A:

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

and expression:

{{ activeUser }}

I want the text to change to everything that was input, after clicking the button. For this, I have the following controller:

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

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

The initial value of "Test" is displayed just fine, and according to the console, the value of "activeUser" also changes correctly. But the text in the view remains the same.

I saw similar questions, where a $scope.$apply()was the answer, but if you add that after console.logI get

"Error: [$ rootScope: inprog] $ is already applied in the process."

What am I missing here?

EDIT:

, , 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"> div view1.html, .

+4
6

( ) . , navbar 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> , navbar. , .

0

, , : ng-. ,

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

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

+3

$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

0

, . , , :

http://jsfiddle.net/xxvsn8xs/

ng-app ng-controller, , , .

, , activeUser angular, - . , $scope. $Apply(), , . , .

$timeout 0, $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) {
0
source

Angular looks at the variable bound to $scope, but if you replace this variable with Angular, it will not be able to detect it. That is why there $applywill be an offer.

Another suggestion is to bind the variable to the 'model' variable:

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);
    };
}]);

View:

{{ myData.activeUser }}
0
source

Is your application running on Apache? I had the same problem when I used the file: // And I fixed my problem with localhost.

0
source

More articles:


All Articles