如何在控制器中将函数的输出显示为angularjs中的嵌套视图
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在控制器中将函数的输出显示为angularjs中的嵌套视图相关的知识,希望对你有一定的参考价值。
我有一个父视图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
)
)
当我在viewprofile
页面点击profile.html
时,viewprofile.html
正在渲染。但是,我想将函数allProfiles()
的值获取到子视图viewprofile
并将它们绑定到html标签
如何获取控制器中的allProfiles()
函数输出到子视图viewprofile.html
答案
您可以将allProfile()函数内的数据绑定到某个rootScope变量。像这样:
$scope.allProfiles = function(){
$http.get('objects/getallprofiles.php').success(function (data, status, headers, config) {
$rootScope.profiles=data;
console.log(data);
});
然后,您可以使用$ rootScope在任何您想要的控制器中访问此变量。
不要忘记在控制器中注入$ rootscope。
另一种方法是将数据存储在服务中,并将服务注入要访问数据的控制器中。
以上是关于如何在控制器中将函数的输出显示为angularjs中的嵌套视图的主要内容,如果未能解决你的问题,请参考以下文章
如何在angularJS中将输入字段设置为ng-invalid
如何在 Eclipse 中将执行显示输出到远程 C++ 的控制台?
在 Typescript 中将 angularjs 指令实现为类