【问题标题】:How to access data present in one controller by two pages in angularjs?如何通过angularjs中的两个页面访问一个控制器中存在的数据?
【发布时间】:2016-09-09 16:51:18
【问题描述】:

我在toolbar.controller.js 中有数据vm.rslt,现在我想从toolbar.htmlsharedwishlistdetails.html 等2 个页面访问它。但现在我只在toolbar.html 页面得到结果。我在toolbar.module.js 中创建了第二页的路径并注入,但我仍然没有得到。请帮我解决这个问题。 该工具栏文件夹包含如下结构,

`sharedwishlistdetails.html
 sharedwishlistdetails.scss
 toolbbar.controller.js
 toolbar.html
 toolbar.module.js
 tolbar.scss`

toolbbar.controller.js

(function ()
{
  'use strict';

   angular
    .module('app.toolbar')
    .controller('ToolbarController', ToolbarController);


    function ToolbarController($rootScope, $mdSidenav, msNavFoldService, $translate, $mdToast, $location, $localStorage, $http,  $scope)
    {
       var vm = this;

       vm.name = $localStorage.name;
       vm.userId = $localStorage._id;

       vm.readNotifications = function(notifId){
          $http({
               url: 'http://192.168.2.8:7200/api/readNotification',
               method: 'POST',
               data: {notificationId: notifId,  userId: vm.userId}
           }).then(function(res){
              vm.rslt = res.data.result1;
              console.log(vm.rslt);
              vm.refresh();
              $location.path('/sharedwishlistdetails');
            }, function(error){
               alert(error.data);
            })
         }
      }
})();

工具栏.hrml

<div class="notification">
    <md-menu id="language-menu" md-offset="0 60" md-position-mode="target-right target" >
        <md-button class="md-fab md-mini " aria-label="Bell" ng-click="$mdOpenMenu()">
            <md-icon md-svg-src="assets/icons/fonts/bell.svg"></md-icon>
        </md-button>

        <md-menu-content  style="height:150px; overflow:auto; ">
            <div class="notifi" ng-repeat="notification in vm.result">
                <md-menu-item ng-hide="vm.showMessage" ng-repeat="name in notification.notificationDetails">
                    <md-button  ng-click="vm.readNotifications(notification._id); vm.findWishlist(notification._id)"> 
                        <b>{{name.userName}}</b> shared wishlist with you. 
                    </md-button>
                </md-menu-item>
                <span><hr flex/></span>
            </div> 

            <md-menu-item ng-show="vm.showMessage">
                <md-button ng-click="">
                    No notifications.
                </md-button>
            </md-menu-item>
            <a ui-sref="app.notifications" style="text-align:center; font-size:14px">See All</a>
        </md-menu-content>
    </md-menu>
    <div ng-show="vm.showBadge" class="badge bg-danger up">{{vm.CountTrue}}</div>   
</div>

工具栏.module.js

(function ()
{
   'use strict';

    angular
       .module('app.toolbar', [])
       .config(config);
    function config($stateProvider, $translatePartialLoaderProvider)
    {
       $translatePartialLoaderProvider.addPart('app/toolbar');

       $stateProvider.state('app.toolbar', {
          url    : '/sharedwishlistdetails',
          views  : {
               'content@app': {
                   templateUrl: 'app/toolbar/sharedwishlistdetails.html',
                   controller : 'ToolbarController as vm'
                }
           }
       });   
    }
})();

【问题讨论】:

  • Angular js 用于处理单页应用程序。您可以尝试在代码中使用路由。
  • @pritishvaidya 这实际上不是真的。 AngularJS 可以在任何 Web 应用程序中使用。它不必是单页应用程序。
  • 一种方法是编写共享服务
  • readNotifications 从哪里调用?显示代码。
  • @ValeryKozlov 我已经更新了我的问题。在toolbbar.html readNotifications 调用中。

标签: angularjs node.js mongodb angular-material


【解决方案1】:

我是否正确,假设您的代码类似于:

   $stateProvider.state('app.toolbar', {
      url    : '/sharedwishlistdetails',
      views  : {
           'content@app': {
               templateUrl: 'app/toolbar/toolbar.html',
               controller : 'ToolbarController as vm'
            },
            'list@app': {
                   templateUrl: 'app/toolbar/sharedwishlistdetails.html',
                   controller : 'ToolbarController as vm'
            }
       }
   });

如果是这样 - 您的模板具有带有不相关数据的不同控制器实例,因此每个控制器应独立加载数据。

如果我错过了建议 - 请从 sharedwishlistdetails.html 向 tada 提供电话,它是 view\route。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-06-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-12-17
    相关资源
    最近更新 更多