角度 js 中 $scope 的 console.log答案

【问题标题】：console.log for $scope in angular js角度 js 中 $scope 的 console.log
【发布时间】：2016-02-16 23:05:02
【问题描述】：

为什么我不能控制台输出 $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());

}]);

控制台将在初始化时输出值，但不会在用户进行更改后输出。

【问题讨论】：

屏幕上的模型正在改变，因为双向数据绑定正在观察范围。但是在console.log()的情况下，如果你想让它控制台模型值，你需要手动设置观察者。

标签： javascript angularjs angularjs-scope angularjs-controller console.log

【解决方案1】：

你需要观察作用域变量：

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

【讨论】：

【解决方案2】：

只是一个更“实用”的版本。每个人都是对的，您记录的是可观察的，而不是观察到的。您想要的是在每次更改为 $scope 时调用 console.log，而不是调用一次（就像您现在拥有的那样）。

$scope.$watch("name", console.log);

【讨论】：

【解决方案3】：

您仅从构造函数进行记录。如果您想在每次发生变化时记录下来，请考虑使用手表：

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

【讨论】：

@Carlton，秒杀我。 :-)

【解决方案4】：

为什么当范围变量发生变化时控制器会被重新渲染？您可以使用范围观察者或输入事件监听器来监听变化。

这是一个带有观察者的示例：

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>

【讨论】：