从控制器外部访问模型数据's在AngularJS中的作用域

Accessing model data from outside a controller's scope in AngularJS

本文关键字：AngularJS 作用域 外部 控制器 访问 模型 数据      更新时间：2023-09-26

这是我现在的HTML，它包含了从HTML本身到脚本的所有内容：

<!doctype html>
<html lang="en-US" ng-app>
    <!--Head-->
    <head>
        <meta charset="UTF-8">
        <title>Lesson 5 - ng-show & ng-hide</title>
        <meta name="viewport" content="width=device-width">
        <style type="text/css">
            * {
                box-sizing: border-box;
            }
            body {
                font: 16px/1.5 sans-serif;
                color: #222;
                margin: 5em;
            }
        </style>
    </head>
    <!--Body-->
    <body ng-controller="information">
        <div>
            <label for="name">
                Name:
                <input type="text" name="username" id="username" placeholder="Your name here please" ng-model="name"/>
            </label>
            <br>
            <label>
                Hide?
                <input type="checkbox" ng-model="checked"/>
            </label>
        </div>
        <div ng-hide="checked">
            Hidden Message here
            <br>
            Welcome {{ name || "user" }}!
        </div>

        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <script type="text/javascript">
            var information = function ($scope) {
                console.log($scope);
            }
        </script>
    </body>
</html>

正如您所看到的，这是一个使用AngularJS的简单HTML页面。您可以看到，主体由一个名为information的控制器控制。

现在，问题是，一旦您从body标记中删除信息，并将其放置到第一个div标记中（就像将ng-controller="information"放置到div标记而不是body标记中一样），您将看到程序停止工作（就像输入您的名称一样，它不会出现），这是意料之中的，因为另一个div在控制器的范围之外。

现在，我想问的是，如何从HTML中的另一个控制器访问数据？我试过以下几种：

  • {{ information.name || "user" }}<-第一次尝试
  • {{ information.$scope.name || user }}<-第二次尝试，因为｛｛｝｝评估JS

最后，我没能得到我想要的结果。那么，如何将来自另一个作用域的信息访问到独立于任何作用域的div标记中呢？

做一件事。

创建一个具有getter-setter属性的服务。如果要从控制器发送数据，请设置消息、变量或对象。并在您想要访问的控制器中使用get函数。这样您就可以轻松地通过控制器传递数据。如果你还是不能告诉我。

相关文章：