我有一个通过工厂抓取数据的控制器。该工厂附加到由Laravel 5提供的API。
function HomeCtrl($scope, AccountService) {
$scope.accounts = [];
$scope.loadAccounts = function () {
AccountService.getData('account', 'active').then(function (data) {
$scope.accounts = data;
}
);
};
$scope.loadAccounts();
}
controllersModule.controller('HomeCtrl', HomeCtrl);
我希望此控制器执行的操作是调用部分视图并将$scope.accounts提供给该部分视图。
以下是我的首要HTML文件应该加载到partial中的内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!--title('{{title}}')-->
<meta name="description" content="{{description}}">
<meta name="keywords" content="{{keywords}}">
<meta name="author" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/handheld.css" media="screen and (min-width:0px) and (max-width:1024px)">
<link rel="stylesheet" href="css/tablet.css" media="screen and (min-width:768px) and (max-width:1024px)">
<link rel="stylesheet" href="css/mobile.css" media="screen and (max-width:767px)">
<base href="/">
</head>
<body>
<div id="wrapper">
<header id="header">
<div class="page clearfix">
<div class="top">
<ul>
<li><a href="">khaccsupport</a></li>
<li><a href="">khaccsupport</a></li>
<li><a href="">shane@khaccounts.net</a></li>
</ul>
</div><a href="/" class="logo"><img src="../images/logo.png"></a>
<section class="secondary-header">
<nav class="navigation">
<ul>
<li class="top-link"><a href="buy-world-of-warcraft-wow-accounts/" class="top-link">Buy WoW Accounts</a></li>
<li class="top-link"><a href="sell-wow-accounts/" class="top-link">Sell WoW Accounts</a></li>
<li class="top-link"><a href="customer-reviews-feedback" class="top-link">Reviews / Feedback</a></li>
<li class="top-link"><a href="buy-sell-wow-accounts-faq" class="top-link">FAQ</a></li>
</ul>
</nav>
</section>
</div>
</header>
<div class="fb-frame">
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fkhaccounts&amp;width=450&amp;height=35&amp;colorscheme=light&amp;layout=standard&amp;action=like&amp;show_faces=false&amp;send=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowtransparency="true"></iframe>
</div>
<div class="content">
<div class="page">
<div ui-view></div>
</div>
</div>
<div class="footer-wrapper index-page">
<footer id="footer">
<div class="page">
<div class="footer-content clearfix">
<div class="links-wrapper clearfix">
<section class="footer-links nav">
<h4>Navigation</h4>
<ul>
<li><a href="/buy-world-of-warcraft-wow-accounts">Buy High End Elite Premium WoW Accounts</a><br><a href="/sell-wow-accounts">Sell High End Elite Premium WoW Accounts</a><br><a href="/">High End Elite Premium WoW Accounts For Sale</a><br><a href="/customer-reviews-feedback">KHAccounts.net Customer Reviews & Feedback</a><br><a href="/buy-sell-wow-accounts-faq">KHAccounts.net Buy & Sell WoW Accounts FAQ</a></li>
</ul>
<ul>
<li></li>
<div class="secondary-footer"><a href="" class="footer-logo"><img src="../images/footer-logo.png"></a><span class="copyright">©2015 Knucklehead Accounts -- All Rights Reserved.</span></div>
</ul>
</section>
<section class="footer-links reference">
<h4>Referral Links</h4>
<ul>
<li><a href="http://www.maskedarmory.com">Anonymous WoW Armory Profiles</a><br><a href="http://www.maskedcrusader.com">Trade WoW Accounts</a><br><a href="http://www.maskedcrusader.com/buy-sell-trade-mmorpg/">MMO Game Account Trading</a><br><a href="http://www.maskedcrusader.com/buy-sell-trade-world-warcraft-wow/">WoW Trading Forum</a></li>
</ul>
<ul>
<li><a href="https://www.arenarating.com/category/rbg-rating-boost/world-of-warcraft/">RBG Rating Boost</a><br><a href="https://www.arenarating.com/category/arena-boost-3v3/world-of-warcraft/">Arena Rating Boost</a><br><a href="http://www.twinkinfo.com">TwinkInfo.com</a><br><a href="http://www.twinkinfo.com/forums">TwinkInfo.com Forums</a><br><a href="http://www.twinkinfo.com/forums/f200/">Twinking Guides</a></li>
</ul>
</section>
</div>
</div>
</div>
</footer>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>
另外，我不想在div上放置一个控制器名称，因为我试图为每个页面重用这个包装器。唯一应该改变的是用户导航到新页面时的ui视图中的内容，或者不是。
我不知道所有这一切是否可行，但我想我会试一试。
如果您有任何问题，请告诉我，因为我确信我没有正确解释所有这些......
答案 0 :(得分：0)
如果计划包含部分，则需要使用ng-include指令。请查看此Plunker以供参考。
<div ng-include="'HomePartial.html'"></div>
将包含您的家庭HTML标记。在这个局部内你需要把控制器HomeCtrl。
<div ng-controller="HomeCtrl">
<h1>Home Partial</h1>
</div>
这允许您将外部HTML标记保持为通用，并使用partials进行分割和征服。您可以根据需要在运行时更改ng-include（或者更好的是，使用路由）。
答案 1 :(得分：0)
您可以使用ng-route来处理控制器与视图的关联。您无需在路径中指定控制器。
<div class="container">
<h1>ng-route</h1>
<ul class="nav nav-tabs">
<li><a href='#view1'>View 1</a></li>
<li><a href='#view2'>View 2</a></li>
</ul>
<div ng-view></div>
</div>
<script type=text/ng-template id=partial/view1.html>
<h3>View1</h3>
<div>{{data}}</div>
</script>
<script type=text/ng-template id=partial/view2.html>
<h3>View2</h3>
<div>{{data}}</div>
</script>
的Javascript
angular.module('app', ['myModule', 'ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/view1', {templateUrl: 'partial/view1.html', controller: 'ctrl'})
.when('/view2', {templateUrl: 'partial/view2.html', controller: 'ctrl2'})
.otherwise({redirectTo: 'view1'})
});
angular.module('myModule', [])
.controller('ctrl', function ($scope) {
$scope.data = 'Some data for view1';
})
.controller('ctrl2', function ($scope) {
$scope.data = 'Some data for view2';
});
在jsFiddle http://jsfiddle.net/neridum/whLa8k6k/
上查看演示