Yeoman Angular:一个视图上的多个控制器
Yeoman Angular: Multiple controllers on a view
我确定我做错了什么,也许尝试在视图上插入多个控制器是不好的(至少我觉得这可能很糟糕),但想就更好的方法发表意见。
我的文件布局为:
应用.js
angular
.module('gemstoreApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl' <---- THIS is where I wish to insert a panelController
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
});
主.js
angular.module('gemstoreApp')
.controller('MainCtrl', function ($scope) {
var gems = [
{
name: 'Gem1',
price: 2.95,
soldOut: false,
images: [
'img1.png'
],
description: 'Some description'
}, {
name: 'Gem2',
price: 1.00,
soldOut: true,
images: [
'img2.png'
],
description: 'Some tetra description'
}, {
name: 'Gem3',
price: 5.00,
soldOut: false,
images: [
'img3.png'
],
description: 'Some tetra description'
}
]
$scope.products = gems;
});
主.html
<div>
<ul>
<div ng-repeat="product in products">
<li>
<p>{{ product.name }} - {{ product.price | currency }} - {{ product.description }}</p>
<img ng-src="{{ product.images[0] }}" alt="">
<button ng-hide="product.soldOut" class='btn btn-primary'>Add to Cart</button>
<button ng-show="product.soldOut" class='btn btn-danger'>Sold Out!!!</button>
</li>
<!== THE "tab" code from here is dirty .. and I'd like ot move it to its own controller ==>
<section ng-init="tab = 1">
<ul class="nav nav-pills">
<li ng-class="{ active:tab === 1}"><a href ng-click="tab = 1">Description</a></li>
<li ng-class="{ active:tab === 2}"><a href ng-click="tab = 2">Specifications</a></li>
<li ng-class="{ active:tab === 3}"><a href ng-click="tab = 3">Reviews</a></li>
</ul>
</section>
<div id="panel" ng-show="tab == 1">
<h4>Description</h4>
<blockquote> {{ product.description }} </blockquote>
</div>
<div id="panel" ng-show="tab == 2">
<h4>Specification</h4>
<blockquote>Nothing yet</blockquote>
</div>
<div id="panel" ng-show="tab == 3">
<h4>Reviews</h4>
<blockquote>Nothing yet</blockquote>
</div>
</div>
</ul>
</div>
我主要尝试将"选项卡"代码从这里重构到一个单独的控制器(panelCtrl
)中,并在此处使用它。所以我可以做这样的事情:
<li ng-class="{ active:panelCtrl.isSelected(1)}"><a href ng-click="panelCtrl.setSelected(1)">Description</a></li>
对于那些熟悉的人,我正在按代码学校复习 Angular 教程,并尝试与 Yeoman 一起做到这一点。
您可以通过将另一个控制器直接放入 html 文件中来向视图添加另一个控制器,如下所示:<div ng-controller="PanelCtrl as panel">
.
但是,也许为您的面板创建指令可能是一个更好的解决方案?指令可以有控制器。这也可以让您在更多视图中使用面板。
在一个视图中拥有多个控制器本身并不是"坏做法"。但这并不意味着每次都使用多个控制器制作视图是"好的做法"。在这种情况下,似乎将您的面板包装成指令是最好的。
PS:你使用过 yeoman 的事实:)没有区别。
更新征求意见:
在为您的角度应用程序确定结构时,有一些非常好的资源,一些答案可以在 AngularJS 应用程序文件结构答案中找到。还有这个社区驱动的棱角风格指南。
相关文章:
- 将范围添加到角度种子默认视图控制器时,测试套件现在失败
- 设置子视图控制器 EmberJS
- 使用emberjs测试视图控制器
- UIwebview图片到新的视图控制器
- 节点.js中的模型-视图-控制器模式
- 如何通过不同的视图/控制器在特定元素上设置 ng-show
- Extjs 5.1:视图控制器中的方法未调用
- 视图控制器和恩约
- 如何在路由更改之间维护视图(控制器)状态
- 角度.js分页过滤的数据并显示总项目,而无需在视图/控制器中复制代码
- 嵌套视图控制器和ng-click-AngularJs
- 视图/控制器不会使用 push() 函数刷新,使用 angularjs 中的 socket.io
- 如何在状态管理器视图控制器中传递已解析的依赖项
- 建议:在JavaScript中难以使用模型视图控制器
- 在Angular JS中动态加载视图/控制器
- 如何将数据从主控制器发射到角度视图控制器
- 如何在Rails视图控制器中访问HTML5本地存储
- 在Angular中,如何重新初始化视图'控制器中的$scope变量?
- 跨视图控制器传输值不工作
- 视图控制器需要:属性不工作