【问题标题】:How to display the output of function in a controller to nested view in angularjs如何将控制器中的函数输出显示到angularjs中的嵌套视图
【发布时间】:2016-10-20 22:07:36
【问题描述】:

我有一个父视图index.html

 <html>
  <head>
    <script src = "assets/js/angular.min.js"></script>
    <script src = "../lib/js/angular-ui/angular-ui-router.js"></script>
    <script src = "app.js"></script>
    <script src = "controllers/profile/ProfileController.js"></script>
  </head>

  <body ng-app="myApp">
     <div class="links">
       <div class='profile'><a ui-sref="profile">Profile</a></div>
       <div class='dashboard'><a ui-sref="dashboard">Dashboard</a></div>
     </div>
     <div class="container">
        <div ui-view></div>
     </div>
   </body>
   </html>

app.js

  var app = angular.module('myApp',['ui.router']);

   app.config(['$stateProvider', '$urlRouterProvider',function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('profile', {
            url: "modules/profile/templates",
            templateUrl: "modules/profile/templates/profile.html",
            controller: 'ProfileController'
        }).state('dashboard', {
            url: "modules/dashboard/templates",
            templateUrl: "modules/dashboard/templates/index.html"
        }).state('profile.viewprofile', {
            url: "modules/profile/templates",
            templateUrl: "modules/profile/templates/viewprofile.html",
            controller: 'ProfileController'
        }).state('profile.createprofile', {
            url: "modules/profile/templates",
            templateUrl: "modules/profile/templates/createprofile.html",
            controller: 'ProfileController'
        });
    }
]);

这是我的profile.html

 <div >
   <div class="links">
    <h3 class="heading">Profile</h3>
       <div class='viewprofile'><a ui-sref="profile.viewprofile">View Profile</a></div>
       <div class='createprofile'><a ui-sref="profile.createprofile">Create Profile</a></div>
       <div class='editprofile'><a ui-sref="profile.editprofile">Edit Profile</a></div>
    </div>
    <div class="content>
       <div ui-view="profile.viewprofile@"></div>
       <div ui-view="profile.createprofile@"></div>
     </div>
   </div>

在我的ProfileController

app.controller('ProfileController',function($scope, $http){
        $scope.allProfiles = function(){
       $http.get('objects/getallprofiles.php').success(function (data, status, headers, config) {
    console.log(data);
    });
}

在控制台显示的数据是

Array
(
    [0] => Array
    (
        [id] => 1
        [0] => 1
        [fname] => sdds
        [1] => sdds
        [lname] => sddssd
        [2] => sddssd
        [mobile] => 333
        [3] => 333
    )
)

当我在profile.html 页面中单击viewprofile 时,viewprofile.html 正在呈现。但是,我想将函数 allProfiles() 的值获取到子视图 viewprofile 并将它们绑定到 html 标签

如何将控制器中的allProfiles() 函数输出获取到子视图viewprofile.html

【问题讨论】:

标签: javascript angularjs angular-ui-router ng-controller nested-views


【解决方案1】:

您可以将 allProfile() 函数中的数据绑定到某个 rootScope 变量。像这样:

$scope.allProfiles = function(){
       $http.get('objects/getallprofiles.php').success(function (data, status, headers, config) {
      $rootScope.profiles=data;
    console.log(data);
    });

然后您可以使用 $rootScope 在您想要的任何控制器中访问此变量。

别忘了在 cotroller 中注入 $rootscope。

另一种方法是将数据存储在服务中,并将服务注入您要访问数据的控制器中。

【讨论】:

  • 它不工作。如果我放入 allProfiles() 函数,我什至没有收到任何警报
  • 我对 angularjs 很陌生。请您展示如何在服务中存储数据并将服务注入控制器中
猜你喜欢
  • 2021-07-01
  • 1970-01-01
  • 1970-01-01
  • 2021-09-11
  • 2016-05-02
  • 2020-01-07
  • 2020-05-14
  • 1970-01-01
  • 2017-04-05
相关资源
最近更新 更多