San*_*ram 5 scope controller angularjs rootscope
HTML文件是这样的:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>HTTP Request</title>
<script src="angularjs"></script>
<script src="appjs"></script>
</head>
<body>
<div ng-controller="myCtrl1">
First Name: <input type="text" ng-model="fname" required>
Last Name: <input type="text" ng-model="lname" required>
<button ng-click="search()">Send HTTP Request</button>
<p>Searching for : {{fname}} {{lname}}</p>
<p>Response Status: </p>
<p>{{status}}</p>
<p>Data: {{data}}</p><br>
<p>Total number of results : {{data.numResults}}</p>
</div>
</body>
</html>
我写了一个控制器:
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl1', ['$rootScope', '$http', function($rootScope, $http) {
$rootScope.fname = "";
$rootScope.lname="";
$rootScope.search = function() {
var search_url = "/search?fname=" + $rootScope.fname + "&lname=" + $rootScope.lname;
alert (search_url);
// alert("/search?fname=" + $scope.fname + "&lname=" + $scope.lname);
$http({method:'GET', url:search_url})
.success(function(data, status, headers, config) {
$rootScope.status = status;
$rootScope.data = data;
$rootScope.headers = headers;
$rootScope.config = config;
});
};
}]);
但是它在alertbox中显示url:/ search？fname =&lname =但是当我使用$ scope而不是$ rootScope时,它工作正常(警报窗口显示url正确/搜索？fname = john&lname = player).需要帮助来详细了解$ rootScope.谢谢.
您可以使用$rootScope替代$scope,但您的变量将是"全球"和所有的控制器(如果你有一个以上),会看到它.
但角度的优势将会有所损失.因为所有模型(ae ng-model)都是在特定的情况下创建的,$scope但不是$rootScope
对于每个控制器定义私有$scope.
因此,如果您在两者中都使用两个控制器,则可以定义变量名称:
$scope.data = "AAA";
在其他控制器中:
$scope.data = "BBB";
它们是不同的因为参考不同的实例(又名控制器)
关于你的问题:
你创建了这条线:
First Name: <input type="text" ng-model="fname" required>
Last Name: <input type="text" ng-model="lname" required>
在控制器下myCtrl1.因此它不会更新你的,$rootScope但$scope指的是myCtrl1.
我想你可以ng-change用来通知$rootScope变化.
添加到HTML:
First Name: <input type="text" ng-model="fname" ng-change ="onfnameChange(fname)" required>
Last Name: <input type="text" ng-model="lname" ng-change ="onlnameChange(lname)" required>
到控制器:
...
$scope.onfnameChange = function(val){
$rootScope.fname = val;
};
$scope.onlnameChange = function(val){
$rootScope.lname = val;
};
...
看到 Fiddle
欢迎来到原型继承的世界.
您myCtrl1范围从继承$rootScope,但像字符串,整数和布尔属性来完成这个范围的任何变化不会影响父作用域属性($rootScope).
基本上,您可以访问父作用域的属性,但不能更改它们的引用(对于对象类型).任何更改都会导致在子范围上创建新属性.
看看我如何处理它的小提琴http://jsfiddle.net/qcUm6/1
阅读本文,您的所有疑惑都将被清除https://github.com/angular/angular.js/wiki/Understanding-Scopes