Angular JS ng-click 未被触发，使用多个控制器
Angular JS ng-click not being triggered, using multiple controllers
我正在尝试从我的一个视图中获取 ng-click 以在全球范围内工作。
我从这个开始 Plunker
我已经看过这些答案了：
ng-click not firing in AngularJS while onclick does
AngularJS : ng-click not working
据我所知，所有这些在同一个控制器中都有一个 ng-click，而我试图调用的函数在不同的控制器中，但它有 $scope，因此该函数应该可以访问如果我没记错的话任何地方。
相关代码（不好意思太多了）：
index.html:
<!doctype html>
<html lang="en" ng-app="floorForceApp">
<head>
<meta charset="utf-8">
<title>Floor Force Web</title>
<link rel="stylesheet" href="floorForceApp.css" />
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-route/angular-route.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- <script src="floorForceApp.js" ></script> -->
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="header-bar/header-bar.module.js"></script>
<script src="header-bar/header-bar.component.js"></script>
<script src="cabinet-page/cabinet-page.module.js"></script>
<script src="cabinet-page/cabinet-page.component.js"></script>
<script src="checkout-page/checkout-page.module.js"></script>
<script src="checkout-page/checkout-page.component.js"></script>
<script src="floor-page/floor-page.module.js"></script>
<script src="floor-page/floor-page.component.js"></script>
<script src="home-page/home-page.module.js"></script>
<script src="home-page/home-page.component.js"></script>
<script src="wall-page/wall-page.module.js"></script>
<script src="wall-page/wall-page.component.js"></script>
</head>
<body>
<header-bar></header-bar>
<div ng-view></div>
</body>
</html>
app.module.js:
'use strict';
angular.module('floorForceApp', [
'headerBar',
'ngRoute',
'cabinetPage',
'checkoutPage',
'floorPage',
'homePage',
'wallPage'
]);
app.config.js:
'use strict';
angular.
module('floorForceApp').
config(['$routeProvider',
function config($routeProvider) {
$routeProvider.
when('/home', {
template: '<home-page></home-page>'
}).
when('/floors', {
template: '<floor-page></floor-page>'
}).
when('/cabinets', {
template: '<cabinet-page></cabinet-page>'
}).
when('/walls', {
template: '<wall-page></wall-page>'
}).
when('/checkout', {
template: '<checkout-page></checkout-page>'
}).
otherwise('/home');
}
]);
checkout-page.module.js(floor-page.module.js 看起来和这个一样，除了它引用 'floorPage'):
'use strict';
angular.module('checkoutPage', [
'ngRoute'
]);
checkout-page.component.js（我尝试调用的函数在此文件中 - $scope.addToCart）：
'use strict';
angular.
module('checkoutPage').
component('checkoutPage',{
templateUrl: 'checkout-page/checkout-page.template.html',
controller: function checkOutController($scope){
$scope.cart = [];
$scope.total = 0;
$scope.totalCount = 0;
$scope.addToCart = function(item,count){
if(!count) count = 1;
if($scope.cart.filter(function (e){ return e.itemNo === item.itemNo})){
$scope.cart.filter(function (e){ return e.itemNo === item.itemNo})[0].count = $scope.cart.filter(function (e){ return e.itemNo === item.itemNo})[0].count + count;
}else{
$scope.cart.push(item);
$scope.cart.filter(function (e){ return e.itemNo === item.itemNo})[0].count = 1;
}
$scope.total = parseFloat($scope.total + (item.itemPrice * count));
}
$scope.removeFromCart = function(item,count){
let workingItem = $scope.cart.filter(function (e){ return e.itemNo === item.itemNo});
if(!count) count = 1;
if(workingItem){
workingItem[0].count = workingItem[0].count - count;
$scope.total = parseFloat($scope.total - (item.itemPrice * count));
}else{
//If No Item found, do nothing
}
}
$scope.checkOut = function(){
}
}
})
楼层-page.component.js
'use strict';
angular.
module('floorPage').
component('floorPage',{
templateUrl: 'floor-page/floor-page.template.html',
controller: function headerBarController($scope,$http){
let self = this;
$http.get('/items/floorForceData.json').then(function(resp){
self.items = resp.data;
});
}
})
floor-page.template.html（这是 ng-click 所在的位置，第二个输入标签）：
<div>
<div ng-repeat="item in $ctrl.items|filter:{itemType:'floor'}" style="height:30em;">
<div class="container-fluid h-100" >
<div class="row h-100">
<div class="col-sm-6 h-100 ">
<div class="row prodImage h-100"></div>
</div>
<div class="col-sm-6 h-100">
<div class="row h-100 ">
<div class="col-sm-12 prodDesc h-50 paddingZero">
<div class="titleDiv">{{item.itemName}}</div>
<div class="descDiv">{{item.itemDesc}}</div>
</div>
<div class="col-sm-12 addToCart h-50 paddingZero">
<div class="row h-100 marginAuto">
<div class="col-sm-6 h-100 paddingZero">
<div class="addDiv">
<input class="addAmount" type="number"/>
</div>
</div>
<div class="col-sm-6 h-100 paddingZero">
<div class="row marginAuto h-100">
<div class="col-sm-12"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4">
<input class="addToCartButton btn btn-success" ng-click="$scope.addToCart(item)" type="button"value="Add to Cart"/>
</div>
<div class="col-sm-4"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
您正在使用组件，因此每个 $scope 都是独立的。来自 docs:
Components only control their own View and Data: Components should never modify any data or DOM that is out of their own scope. Normally, in AngularJS it is possible to modify data anywhere in the application through scope inheritance and watches. This is practical, but can also lead to problems when it is not clear which part of the application is responsible for modifying the data. That is why component directives use an isolate scope, so a whole class of scope manipulation is not possible.
行 ng-click="$scope.addToCart(item)" 无论如何都不起作用，因为您需要通过默认为 $ctrl 的控制器别名访问该函数。所以你会写类似 $ctrl.addToCart(item).
如果我是你，我会继续使用组件并重构应用程序，以便通过 input/output 绑定或服务明确组件之间的通信。
希望这对您有所帮助
我正在尝试从我的一个视图中获取 ng-click 以在全球范围内工作。
我从这个开始 Plunker
我已经看过这些答案了：
ng-click not firing in AngularJS while onclick does
AngularJS : ng-click not working
据我所知，所有这些在同一个控制器中都有一个 ng-click，而我试图调用的函数在不同的控制器中，但它有 $scope，因此该函数应该可以访问如果我没记错的话任何地方。
相关代码（不好意思太多了）：
index.html:
<!doctype html>
<html lang="en" ng-app="floorForceApp">
<head>
<meta charset="utf-8">
<title>Floor Force Web</title>
<link rel="stylesheet" href="floorForceApp.css" />
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-route/angular-route.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- <script src="floorForceApp.js" ></script> -->
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="header-bar/header-bar.module.js"></script>
<script src="header-bar/header-bar.component.js"></script>
<script src="cabinet-page/cabinet-page.module.js"></script>
<script src="cabinet-page/cabinet-page.component.js"></script>
<script src="checkout-page/checkout-page.module.js"></script>
<script src="checkout-page/checkout-page.component.js"></script>
<script src="floor-page/floor-page.module.js"></script>
<script src="floor-page/floor-page.component.js"></script>
<script src="home-page/home-page.module.js"></script>
<script src="home-page/home-page.component.js"></script>
<script src="wall-page/wall-page.module.js"></script>
<script src="wall-page/wall-page.component.js"></script>
</head>
<body>
<header-bar></header-bar>
<div ng-view></div>
</body>
</html>
app.module.js:
'use strict';
angular.module('floorForceApp', [
'headerBar',
'ngRoute',
'cabinetPage',
'checkoutPage',
'floorPage',
'homePage',
'wallPage'
]);
app.config.js:
'use strict';
angular.
module('floorForceApp').
config(['$routeProvider',
function config($routeProvider) {
$routeProvider.
when('/home', {
template: '<home-page></home-page>'
}).
when('/floors', {
template: '<floor-page></floor-page>'
}).
when('/cabinets', {
template: '<cabinet-page></cabinet-page>'
}).
when('/walls', {
template: '<wall-page></wall-page>'
}).
when('/checkout', {
template: '<checkout-page></checkout-page>'
}).
otherwise('/home');
}
]);
checkout-page.module.js(floor-page.module.js 看起来和这个一样，除了它引用 'floorPage'):
'use strict';
angular.module('checkoutPage', [
'ngRoute'
]);
checkout-page.component.js（我尝试调用的函数在此文件中 - $scope.addToCart）：
'use strict';
angular.
module('checkoutPage').
component('checkoutPage',{
templateUrl: 'checkout-page/checkout-page.template.html',
controller: function checkOutController($scope){
$scope.cart = [];
$scope.total = 0;
$scope.totalCount = 0;
$scope.addToCart = function(item,count){
if(!count) count = 1;
if($scope.cart.filter(function (e){ return e.itemNo === item.itemNo})){
$scope.cart.filter(function (e){ return e.itemNo === item.itemNo})[0].count = $scope.cart.filter(function (e){ return e.itemNo === item.itemNo})[0].count + count;
}else{
$scope.cart.push(item);
$scope.cart.filter(function (e){ return e.itemNo === item.itemNo})[0].count = 1;
}
$scope.total = parseFloat($scope.total + (item.itemPrice * count));
}
$scope.removeFromCart = function(item,count){
let workingItem = $scope.cart.filter(function (e){ return e.itemNo === item.itemNo});
if(!count) count = 1;
if(workingItem){
workingItem[0].count = workingItem[0].count - count;
$scope.total = parseFloat($scope.total - (item.itemPrice * count));
}else{
//If No Item found, do nothing
}
}
$scope.checkOut = function(){
}
}
})
楼层-page.component.js
'use strict';
angular.
module('floorPage').
component('floorPage',{
templateUrl: 'floor-page/floor-page.template.html',
controller: function headerBarController($scope,$http){
let self = this;
$http.get('/items/floorForceData.json').then(function(resp){
self.items = resp.data;
});
}
})
floor-page.template.html（这是 ng-click 所在的位置，第二个输入标签）：
<div>
<div ng-repeat="item in $ctrl.items|filter:{itemType:'floor'}" style="height:30em;">
<div class="container-fluid h-100" >
<div class="row h-100">
<div class="col-sm-6 h-100 ">
<div class="row prodImage h-100"></div>
</div>
<div class="col-sm-6 h-100">
<div class="row h-100 ">
<div class="col-sm-12 prodDesc h-50 paddingZero">
<div class="titleDiv">{{item.itemName}}</div>
<div class="descDiv">{{item.itemDesc}}</div>
</div>
<div class="col-sm-12 addToCart h-50 paddingZero">
<div class="row h-100 marginAuto">
<div class="col-sm-6 h-100 paddingZero">
<div class="addDiv">
<input class="addAmount" type="number"/>
</div>
</div>
<div class="col-sm-6 h-100 paddingZero">
<div class="row marginAuto h-100">
<div class="col-sm-12"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4">
<input class="addToCartButton btn btn-success" ng-click="$scope.addToCart(item)" type="button"value="Add to Cart"/>
</div>
<div class="col-sm-4"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
您正在使用组件，因此每个 $scope 都是独立的。来自 docs:
Components only control their own View and Data: Components should never modify any data or DOM that is out of their own scope. Normally, in AngularJS it is possible to modify data anywhere in the application through scope inheritance and watches. This is practical, but can also lead to problems when it is not clear which part of the application is responsible for modifying the data. That is why component directives use an isolate scope, so a whole class of scope manipulation is not possible.
行 ng-click="$scope.addToCart(item)" 无论如何都不起作用，因为您需要通过默认为 $ctrl 的控制器别名访问该函数。所以你会写类似 $ctrl.addToCart(item).
如果我是你，我会继续使用组件并重构应用程序，以便通过 input/output 绑定或服务明确组件之间的通信。
希望这对您有所帮助