AngularJS view not update

Я пытаюсь сделать свое первое приложение AngularJS, и у меня возникла проблема.AngularJS view not update

У меня есть вход:

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

Начальное значение «Тест» показано очень хорошо, и в соответствии с консолью значения «activeUser», изменяющейся правильно, как хорошо. Но текст в представлении остается прежним.

Я видел подобные вопросы, где $scope.$apply() был ответ, но если я добавлю, что после того, как я получаю console.log

"Error: [$rootScope:inprog] $apply already in progress".

Что я здесь отсутствует?

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, но это не имело значения.

источник

2015-03-17 Berry

Возможно, вы разместили '{{activeUser}}' вне контроллера div –

Спасибо за предложение, pankajparker. Я проверил, и это не так. – Berry

Бен Фельда, «текст остается тем же» Я имею в виду, что он говорит «Тест», даже после нажатия кнопки. – Berry

Я положил свою навигационную панель (содержащую вход и кнопку) в частичную и сделал для нее новую директиву. Вместо того, чтобы размещать навигационную панель в 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> ко всем представлениям, где я хочу навигатор. Спасибо всем, ваша помощь подтолкнула меня в правильном направлении.

источник

2015-03-18 12:28:33 Berry

У вас есть свои свойства непосредственно на $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

источник

2015-03-17 13:15:45

В своем коде я ничего не вижу причиной проблемы. Я сделал скрипку, которая показывает, что ваш код работает:

http://jsfiddle.net/xxvsn8xs/

Вы должны объявить ng-app и ng-controller конечно, как и в скрипке, чтобы приложение работает на всех.

Кроме того, обновление обновления может не произойти, если установка активного пользователя фактически происходит за пределами угловой области, которая может находиться во внешней библиотеке или что-то еще. Это правда, что они могут быть достигнуты путем прямого вызова $ 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) {

источник

2015-03-17 13:16:24 Rias

Угловые наблюдает переменные вы связываться с $scope, но если заменить эту переменную Угловой не в состоянии обнаружить его. Вот почему $apply было бы предложением.

Другое предложения привязать переменный к «модели» переменный:

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

источник

2015-03-17 13:17:11 devqon

Я думаю, у потерял кнопку или текстовое поле или выражение, примечания: эти должен находиться внутри ng-контроллера. пожалуйста, попробуйте это, он будет работать

<html> 

    <head> 
    <script data-require="[email protected]*" 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

источник

2015-03-17 13:22:48

ли вы выполнить приложение в Apache? У меня была такая же проблема, когда я использовал файл: // И я исправил свою проблему с помощью localhost.

источник

2015-03-17 13:36:04

AngularJS view not update

ответ

Смежные вопросы