个人中心
gpt4 book ai didi

angularjs - 为什么我不能使用 $rootScope 而不是 $scope？

转载 作者：行者123 更新时间：2023-12-04 16:29:17 25 4
gpt4 key购买 nike

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>

我写了一个 Controller : 
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;
        });
    };
}]);

但它在警报框中显示 url 为:/search?fname=&lname=
但是当我在任何地方都使用 $scope 而不是 $rootScope 时，它​​可以正常工作(警报窗口正确显示 url/search?fname=john&lname=player)。
需要帮助以详细了解 $rootScope。谢谢。

最佳答案

您可以使用 $rootScope而是 $scope但是您的变量将是“全局的”，并且所有 Controller (如果您有多个 Controller )都会看到它。

但是 Angular 的优势会丢失一点。因为所有模型(a.e ng-model )都将在特定的 $scope 下创建但不是 $rootScope
为每个 Controller 定义私有(private) $scope .

因此，如果您同时使用两个 Controller ，则可以定义变量名称:

 $scope.data = "AAA";

在其他 Controller 中: 
 $scope.data = "BBB";

它们是不同的，因为引用不同的实例(又名 Controller )

关于您的问题:

您创建了以下行: 
 First Name: <input type="text" ng-model="fname" required>
 Last Name: <input type="text" ng-model="lname" required>

在 Controller 下 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>

到 Controller : 
...
 $scope.onfnameChange = function(val){
   $rootScope.fname = val;
 };

$scope.onlnameChange = function(val){
  $rootScope.lname = val;
};
...

见 Fiddle

关于angularjs - 为什么我不能使用 $rootScope 而不是 $scope？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18914795/

25 4 0
文章推荐： android-studio - NDK不包含任何平台
文章推荐： android-studio - NDK 不包含任何平台
文章推荐： button - 如何使用WebView和WebEngine对JavaFX中的“后退”和“前进”按钮进行编程？
文章推荐： symfony - 配置 Symfony2/Swiftmailer 使用 "sendmail -t"
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com