时间戳

首页 > 解决方案 > Angular JS ng-click没有被触发，使用多个控制器

javascript - Angular JS ng-click没有被触发，使用多个控制器

问题描述

我正在尝试从我的一种观点中获得 ng-click 以在全球范围内工作。

我从这个Plunker开始

我已经看过这些答案了：

ng-click 不会在 AngularJS 中触发，而 onclick 会触发

Angular ng-click 未触发

AngularJS：ng-click不起作用

据我所知，所有这些在同一个控制器中都有一个 ng-click，而我试图调用的函数在不同的控制器中，但它有 $scope，所以如果我在任何地方都应该可以访问该函数没有弄错。

相关代码（很抱歉）：

索引.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>

标签： javascriptangularjsangularjs-ng-click

解决方案

您正在使用组件，因此每个 $scope 都是隔离的。从文档：

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

该行ng-click="$scope.addToCart(item)"无论如何都不起作用，因为您需要通过默认为$ctrl. 所以你会写类似$ctrl.addToCart(item).

如果我是你，我会继续使用组件并重新构建应用程序，以便组件之间的通信是明确的，无论是通过输入/输出绑定还是通过服务。

希望这可以帮助

推荐阅读