AddProductCtrl.ts和productListCtrl.ts中有两个类。我想在addProductctrl类中实例化productListctrl类来访问产品而不是服务。我该如何实施？这是一个好习惯。我只想看看是否有可能？
interface IProductModel {
ProductName: string;
Code: string;
Available: Date;
Price: number;
prods: any[];
}
class AddProductCtrl implements IProductModel {
ProductName: string;
Code: string;
Available: Date;
Price: number;
prods: any[];
constructor() {
this.getProducts();
}
addProduct = function (ProductName: string, code: string, Available: Date, Price: number) {
var newProduct = {
"ProductName": ProductName,
Code: code,
Available: Available,
Price: Price
};
this.prods.push(newProduct);
}
getProducts = function () {
}
}
angular.module("productManagement").controller("AddProductCtrl", AddProductCtrl)
interface IProductListModel {
title: string;
showImage: boolean;
showPane: boolean;
products: any[];
toggleImage(): void;
togglePane():void;
}
class ProductListCtrl implements IProductListModel {
title: string;
showImage: boolean;
products: any[];
showPane: boolean;
constructor() {
this.title = "Product List";
this.showImage = false;
this.showPane = false;
this.products = [
{
"productId": 1,
"productName": "Leaf Rake",
"productCode": "GDN-0011",
"releaseDate": new Date(2009, 2, 19),
"description": "Leaf rake with 48-inch wooden handle.",
"price": 19.95,
"imageUrl": "http://openclipart.org/image/300px/svg_to_png/26215/Anonymous_Leaf_Rake.png"
},
{
"productId": 2,
"productName": "Garden Cart",
"productCode": "GDN-0023",
"releaseDate": new Date(2010, 2, 18),
"description": "15 gallon capacity rolling garden cart",
"price": 32.99,
"imageUrl": "http://openclipart.org/image/300px/svg_to_png/58471/garden_cart.png"
},
{
"productId": 5,
"productName": "Hammer",
"productCode": "TBX-0048",
"releaseDate": new Date(2013, 4, 21),
"description": "Curved claw steel hammer",
"price": 8.99,
"imageUrl": "http://openclipart.org/image/300px/svg_to_png/73/rejon_Hammer.png"
}
]
}
toggleImage(): void {
this.showImage = !this.showImage;
}
togglePane():void {
this.showPane = !this.showPane;
}
}
angular.module("productManagement").controller("ProductListCtrl",ProductListCtrl)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Acme Product Management</title>
<!-- Style sheets -->
<link href="styles/bootstrap.css" rel="stylesheet" />
</head>
<body ng-app="productManagement">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">Acme Product Management</div>
</div>
</div>
</nav>
<div class="container">
<div ng-controller="ProductListCtrl as vm" >
<button class="btn btn-primary ng-binding" ng-click="vm.togglePane();" >Show Product Pane</button>
<br/>
<br/>
<div ng-if="!vm.showPane">
<div ng-include="'app/products/productListView.html'"></div>
</div>
<div ng-controller="AddProductCtrl as ap" >
<div ng-include="'app/products/AddProductView.html'"></div>
</div>
</div>
</div>
<!-- Library Scripts -->
<script src="scripts/angular.js"></script>
<script src="scripts/angular-resource.js"></script>
<script src="scripts/angular-mocks.js"></script>
<script src="scripts/angular-route.js"></script>
<!-- Application Script -->
<script src="app/app.js"></script>
<!-- Domain Classes -->
<!-- Services -->
<!-- Controllers -->
<script src="app/products/productListCtrl.js"></script>
<script src="app/products/AddProductCtrl.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Acme Product Management</title>
<!-- Style sheets -->
<link href="styles/bootstrap.css" rel="stylesheet" />
</head>
<body ng-app="productManagement">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">Acme Product Management</div>
</div>
</div>
</nav>
<div class="container">
<div ng-controller="ProductListCtrl as vm" >
<button class="btn btn-primary ng-binding" ng-click="vm.togglePane();" >Show Product Pane</button>
<br/>
<br/>
<div ng-if="!vm.showPane">
<div ng-include="'app/products/productListView.html'"></div>
</div>
<div ng-controller="AddProductCtrl as ap" >
<div ng-include="'app/products/AddProductView.html'"></div>
</div>
</div>
</div>
<!-- Library Scripts -->
<script src="scripts/angular.js"></script>
<script src="scripts/angular-resource.js"></script>
<script src="scripts/angular-mocks.js"></script>
<script src="scripts/angular-route.js"></script>
<!-- Application Script -->
<script src="app/app.js"></script>
<!-- Domain Classes -->
<!-- Services -->
<!-- Controllers -->
<script src="app/products/productListCtrl.js"></script>
<script src="app/products/AddProductCtrl.js"></script>
</body>
</html>
我想检查为什么ng-click =“ vm.togglePane（）;”无法正常工作。