2
除了使用多個ng-controller指令外，如何加入多個分散的UI組件？我看到了創建某種UI服務的建議，但我不知道如何通過ng-click調用服務方法。將角色js中的一個控制器散佈到一個控制器
在下面的代碼中，我有添加列表項的表單，但它是在疊加中，而項目本身應該在<div id="page"></div>中，所以我如何將它們鏈接在一起？
html:
<body ng-app="app">
<div id="overlay">
<div class="overlayPage" id="addSiteForm" ng-controller="SitesController">
<h2>Add site</h2>
<div class="inputContainer">
<p>Title</p>
<input type="text" id="addSiteTitle" ng-model="newSite.title">
</div>
<div class="inputContainer">
<p>URL</p>
<input type="text" id="addSiteUrl" ng-model="newSite.url">
</div>
<div class="buttonContainer right">
<button id="addSiteSumit" ng-click="addSite()">Add</button>
<button id="addSiteCancel" ng-click="hideOverlay()">Cancel</button>
</div>
</div>
</div>
<div id="header">
<h1>New tab</h1>
</div>
<div id="headerButtons">
<div id="addSiteButton" class="headerButton" ng-controller="SitesController" ng-click="showOverlay()"><p>Add site</p></div>
<div id="settingsButton" class="headerButton"><p>Settings</p></div>
</div>
<div id="page"></div>
<div id="actionBar">
<div class="actionPage shown" id="mainActionPage">
<div class="action siteBoxAction" id="deleteButton"><p>Delete</p></div>
<div class="action siteBoxAction" id="resizeButton"><p>Resize</p></div>
<div class="action siteBoxAction" id="editButton"><p>Edit</p></div>
</div>
<div class="actionPage" id="resizeActionPage">
<div class="action back"><p>Back</p></div>
<div class="action size small"><p>Small</p></div>
<div class="action size normal"><p>Normal</p></div>
<div class="action size large"><p>Large</p></div>
<div class="action size icon"><p>Icon</p></div>
</div>
</div>
</body>
SitesController:
app.controller('SitesController', function($scope, SitesFactory){
$scope.sites = SitesFactory.getSites();
console.log($scope.sites);
$scope.addSite = function(){
console.log($scope.newSite);
// code for adding site
}
$scope.showOverlay = function(){
$('#overlay').addClass('shown');
}
$scope.hideOverlay = function(){
$('#overlay').removeClass('shown');
}
});