console.log для $scope в angular js

Почему я не могу вывести на консоль значения $scope? Я пытаюсь извлечь назначенные пользователем значения со страниц и получить их в контроллере. В конце концов я хотел бы передать это службе, чтобы несколько контроллеров могли получить доступ к этим данным.

HTML

<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
    <head>
            <meta http-equiv="X-UA-Compatible" content="IE=Edge">
            <meta charset="UTF-8">
            <link rel="stylesheet" href="css/bootstrap.min.css" />    
            <!-- CDN lib files -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
            <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.0/ui-bootstrap-tpls.min.js"></script>    

            <!-- custom angular script -->
            <script src="js/app.js"></script>  
    </head>
     <body>
        <div class="container">
            <div ng-controller="mainController">
                <h1>Hello world!</h1>
                <label> Please enter something</label>
                <input textarea ng-model="name"></input>
                <h4> This is what you entered : {{ name }} </h4>
                <h4 style=color:red> now filtering: {{ lower() }}</h4>
            </div>
        </div>
    </body>
</html>

APP.JS

var myApp = angular.module('myApp', []);

myApp.controller('mainController', ['$scope', '$filter', function($scope, $filter) {

    $scope.name = 'Test ';  
    $scope.lower = function(){
        return $filter('lowercase')($scope.name);
    }

    $scope.name = $scope.lower();

    console.log($scope.name);
    console.log($scope.lower());

}]);

Консоль будет выводить значения при инициализации, но не после внесения пользователем изменений.

введите здесь описание изображения


javascript angularjs console.log angularjs-controller angularjs-scope
person Mad-D    schedule 16.02.2016    source источник
comment
Модель на экране меняется из-за двусторонней привязки данных, где отслеживается область действия. Но в случае с console.log() вам нужно установить наблюдателя вручную, если вы хотите, чтобы консоль отображала значение модели.   -  person Rahul Jha    schedule 29.05.2017

Ответы (4)


arrow_upward
8
arrow_downward

Вам нужно посмотреть переменную области видимости:

$scope.$watch('name', function() {
    console.log($scope.name);
});

Дополнительная информация: https://stackoverflow.com/a/15113029/5787736

person Carlton    schedule 16.02.2016

arrow_upward
3
arrow_downward

Просто более "функциональная" версия. Все правы, вы регистрируете наблюдаемое, а не то, что наблюдалось. Вы хотите, чтобы console.log вызывался при каждом изменении на $scope, а не вызывался один раз (как у вас сейчас).

$scope.$watch("name", console.log);
person Fresheyeball    schedule 16.02.2016

arrow_upward
2
arrow_downward

Вы регистрируетесь только из конструктора. Если вы хотите регистрировать каждый раз, когда что-то меняется, подумайте о часах:

$scope.$watch("name", function() {
    console.log($scope.name);        
}
person Drew Delano    schedule 16.02.2016
comment
@Карлтон, побей меня на секунды. :-) - person Drew Delano; 17.02.2016

arrow_upward
1
arrow_downward

Почему вы ожидаете, что контроллер будет перерисовываться при изменении переменной области видимости? Вы можете использовать наблюдатели за областью действия или прослушиватели входных событий для отслеживания изменений.

Вот пример со наблюдателем:

var myApp = angular.module('myApp', []);

myApp.controller('mainController', ['$scope', '$filter', function($scope, $filter) {

    $scope.name = 'Test ';  
    $scope.lower = function(){
        return $filter('lowercase')($scope.name);
    }

    $scope.name = $scope.lower();

    console.log($scope.name);
    console.log($scope.lower());
  
    $scope.$watch('name', function() {
        console.log($scope.name);
        console.log($scope.lower());
    });

}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" class="container">
  <div ng-controller="mainController">
    <h1>Hello world!</h1>
    <label>Please enter something</label>
    <input textarea ng-model="name" />
    <h4> This is what you entered : {{ name }} </h4>
    <h4 style=color:red> now filtering: {{ lower() }}</h4>
  </div>
</div>

person Shomz    schedule 16.02.2016