用于$ js的$ scope的console.log
[英]console.log for $scope in angular js
原文
2016-02-16 23:05:02
8
4
javascript/
angularjs/
angularjs-scope/
angularjs-controller/
console.log
问题描述
为什么我无法控制输出$ 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());
}]);
控制台将在初始化时输出值，但在用户进行更改后不会输出。
4 个解决方案
解决方案1
7 已采纳 2016-02-16 23:09:25
您需要观察范围变量：
$scope.$watch('name', function() {
console.log($scope.name);
});
解决方案2
3 2016-02-16 23:13:09
只是一个更“功能”的版本。 每个人都是对的，你正在记录可观察的，而不是观察到的。 你想要的是每次更改$scope调用console.log ，而不是一次调用（就像你现在一样）。
$scope.$watch("name", console.log);
解决方案3
2 2016-02-16 23:09:33
您只从构造函数中记录。 如果您想在每次更改时记录，请考虑使用手表：
$scope.$watch("name", function() {
console.log($scope.name);
}
解决方案4
1 2016-02-16 23:11:46
为什么在范围变量发生变化时，您是否期望重新呈现控制器？ 您可以使用范围观察器或输入事件侦听器来侦听更改。
这是一个观察者的例子：
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>
Console.log不可变JS
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.