Question

我正在尝试按下按钮的ng-单击功能。我尝试了很多东西，但它似乎仍然没有效果。我的功能附加到范围。我试图在按钮上单击一下按钮运行一个功能。我尝试了很多东西，但它似乎仍然没有效果。我的功能附加到范围。我试图在按钮上单击一下按钮运行一个功能。我尝试了很多东西，但它似乎仍然没有效果。我的功能附加到范围。我试图在按钮上单击一下按钮运行一个功能。我尝试了很多东西，但它似乎仍然没有效果。我的功能附加到范围。我试图在按钮上单击一下按钮运行一个功能。我尝试了很多东西，但它似乎仍然没有效果。我的功能附加到范围。我试图在按钮上单击一下按钮运行一个功能。我尝试了很多东西，但它似乎仍然没有效果。我的功能附加到范围。

var app= angular.module('mainApp', []);
app.controller('institutions',function ($scope, $http) {
    $scope.map;
    $scope.schools;
    $scope.markers=[];
    $scope.myLatLng={lat: 43.6532, lng: -79.3832};
    $http.get('data/institutions001.json')
        .then(function (response) {
            $scope.schools = response.data.institutions;
        })
        .then(function () {
            $scope.map = new google.maps.Map(document.getElementById('stationMap'), {
                center: $scope.myLatLng,
                zoom: 7,
                mapTypeId: 'roadmap'
            });
            $scope.addMarker( $scope.schools)
        });
    $scope.addMarker=function (places) {
        $scope.markers = [];
        $.each(places, function (key, value) {
            var marker = new google.maps.Marker({
                position: {lat: value.latitude, lng: value.longitude},
                map:  $scope.map,
                title: value.el_name
            });
            $scope.markers.push(marker)
        });

    };

    $scope.removeMarkers= function () {
    console.log("working")
    };


});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Canada Institution Guide</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">

    <!--angular js-->
    <script src="js/angular.min.js"></script>
    <script src="js/controller.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body ng-app="mainApp">
<nav class="navbar navbar-default">
        <div class="container-fluid">
            <a href="#" class="navbar-brand">Ontario Institution Guide</a>
            <ul class="nav navbar-nav">
                <li role="presentation" class="active"><a href="#">Home</a></li>
                <li role="presentation"><a href="utilities.html">Utilities</a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="container-fluid">
    <div id="stationMap">

    </div>
    <div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading"></div>
        <div class="panel-body">
        <div class="row">

            <div class="input-group col-sm-3 pull-left">
                <span class="input-group-addon" id="basic-addon1">Filter by Name</span>
                <input type="text" class="form-control" placeholder="Name" ng-model="globalFiter.el_name" aria-describedby="basic-addon1">
            </div>
           <div class="input-group col-sm-3 pull-left">
                <span class="input-group-addon" id="basic-addon3">Filter by Type</span>
                <input type="text" class="form-control" placeholder="type"  ng-model="globalFiter.el_type" aria-describedby="basic-addon3">
            </div>
            <div class="input-group col-sm-3 pull-left">
                <span class="input-group-addon" id="basic-addon2">Filter by Address</span>
                <input type="text" class="form-control" placeholder="Address"  ng-model="globalFiter.Address" aria-describedby="basic-addon2">
            </div>
            <div class="input-group col-sm-2 pull-right">
                <button class="btn btn-primary"  ng-click="removeMarkers()">Show on Map</button>
            </div>
        </div>

        </div>

        <!-- Table -->
        <div class="table-responsive pre-scrollable" id="tableContainer" ng-controller="institutions">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>S/N</th>
                    <th>Code</th>
                    <th>School Name</th>
                    <th>Type</th>
                    <th>Address</th>
                </tr>
                </thead>
                <tbody>
                <!--loop-->
                <tr ng-repeat="school in (filteredItems=(schools | filter:globalFiter))">
                    <td>.</td>
                    <td>{{school.el_code}}</td>
                    <td>{{school.el_name}}</td>
                    <td>{{school.el_type}}</td>
                    <td>{{school.Address}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!--<script src="js/mapScript.js"></script>-->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDxEAx_VywfcUk7qOWyKnr9W1Jyoe3g7g8" ></script>
<script src="js/bootstrap.min.js"></script>

</body>
</html>

Answer 1

您使用ng-click="removeMarkers()"的代码块不会附加到任何范围。您不能在<table>元素上将控制器附加到稍后的版本。

如果在DOM树中将ng-controller=".."指令移到更高位置，则代码应按预期工作。例如，在<body元素上。

<body ng-app="mainApp" ng-controller="institutions">

ng-click not kick event。尝试过以前的帖子推荐

1 个答案: