Question

我正在尝试从其中一个视图中进行ng-click操作以在全球范围内工作。

我从这个Plunker

开始

我已经查看了以下答案：

ng-click not firing in AngularJS while onclick does

Angular ng-click not firing

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(){

            }
        }
    })

floor-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>

Answer 1

您正在使用组件，因此每个$ scope都是隔离的。来自docs：

组件仅控制自己的视图和数据：组件绝不能修改超出其范围的任何数据或DOM。通常，在AngularJS中，可以通过作用域继承和监视在应用程序中的任何地方修改数据。这很实用，但是当不清楚应用程序的哪一部分负责修改数据时，也会导致问题。这就是为什么组件指令使用隔离范围的原因，因此无法进行整个范围的操作。

行ng-click="$scope.addToCart(item)"仍然无法工作，因为您需要通过默认为$ctrl的控制器别名访问该函数。因此，您将编写类似$ctrl.addToCart(item)的内容。

如果您是我，我将继续使用组件并重新构建应用程序，以便通过输入/输出绑定或通过服务来明确显示组件之间的通信。

希望这会有所帮助

使用多个控制器未触发Angular JS ng-click

1 个答案: