【问题标题】:How do I pass a value from main html to partials?如何将值从主 html 传递到部分?
【发布时间】:2013-05-28 16:04:02
【问题描述】:

主文件(index.php)有一些会话信息,比如我想在部分(视图)中使用的用户名。这些是静态 html 文件,我更喜欢让它们保持静态。

我可以从部分的控制器调用服务器来获取数据。但是我有主页加载时的信息,并且稍后加载部分时它们不会更改。

如何将这些信息放在主 html 上,然后在加载时传递给部分的控制器?

PS:我使用的是AngularJS 1.1.5(最近开始学习AngularJS)

更新:我尝试在主页设置值上使用控制器和控制器尝试读取的部分服务。我无法让它工作。

【问题讨论】:

    标签: angularjs


    【解决方案1】:

    这是我要做的:

    在您的 index.php/html/whatever 中包含一个带有 Angular 服务的脚本标记,该服务捕获并返回您的数据。

    <html>
        <head>
    
            <!-- Include Angular -->
    
            <script type="text/javascript">
    
                // By creating this service, we can capture the data from
                // from the server and store it.
                angular.module('myApp').factory('usrData', [function () {
    
                    var data = {};
    
                    data.usrData = <?php echo $usrService->getUserData(); ?>;
    
                    return data;
                }]);
            </script>
        </head>
        <body>
            <!-- Continue with HTML -->
    

    然后,您可以拥有另一个服务,例如在 service.js 中,用于收集您从服务器捕获的内联数据以及您通过 AJAX 查询的其他数据,并创建一个 API 来管理这一切.为此,您可以将 HTML 中的内联服务作为依赖项注入到此 dataServices 模块中:

    angular.module('myApp').factory('dataServices', [
    
        '$http', 'otherData', 'usrData', // <-- These are the module dependencies
    
        function ($http, otherData, usrData) { // <-- Here you use them as parameters
    
            'use strict';
    
            var dataModel = {
    
                otherData: otherData,
                usrData: usrData
            };
    
            return { // Data service API
    
                query: function (dataType) {
    
                    // returns data
    
                    // API continues …
    

    最后,在你的控制器中,比如 controller.js,你注入这个 dataServices 服务作为一个依赖来通过这个 API 检索和保存你的数据:

    angular.module('myApp').controller('UsrWidget', [
    
        '$scope', 'dataServices',
    
        function ctrlrPtHeader($scope, dataServices) {
    
            "use strict";
    
            $scope.usrData = dataServices.query('usrData');
    
            // And now you have the data.
    

    现在,控制器可以直接访问内联到 HTML 中的 usrData 服务,但我更喜欢全局 API 来管理我的数据,方法是提供一个漂亮的 API 脚本并将我的 HTML 保持为尽可能干净。整个事情的秘诀是将所有数据封装在 Angular 环境中,并通过依赖注入和工厂方法传递信息。

    【讨论】:

    • 它有效。在包含我的控制器代码后,我必须放置该脚本。如果我以前有它,说“没有模块'myApp'”。谢谢。
    • 太好了,感谢您让我知道它对您有用。祝你的项目好运!
    【解决方案2】:

    内联 php 的时代已经一去不复返了——包括会话数据。

    您想要做的是创建一个服务对象,为“所有”数据调用您的“服务器端应用程序”,如果您愿意,您甚至可以将会话绑定到 JSON 对象。

    此服务对象需要由其他部分共享,这些部分很可能有自己的控制器。为此,您需要能够在服务对象上share data between controllers

    【讨论】:

    • 在决定将初始内容向下发送之前,服务器上有一定程度的处理。在某些情况下,会重定向到其他地方。该处理导致可以下推的数据。如果我调用服务器来获取所有数据,我将重复处理。不过我的前提可能是错误的。
    • @user2429270 你也可以看看$cookieFactory
    • 谢谢丹。我会看看这两个建议。
    猜你喜欢
    • 2019-10-13
    • 1970-01-01
    • 1970-01-01
    • 2012-10-09
    • 1970-01-01
    • 2018-10-06
    • 2017-09-06
    • 1970-01-01
    • 2014-11-20
    相关资源
    最近更新 更多