Question

我想从我的代码中的javascript调用addRectangleMethod方法，以便我可以将服务器端信息输入Angular数据模型。我不断收到我试图调用的方法未定义的错误。角度是打字稿。

HTML

<!DOCTYPE html>
<html >
<head>
<style>
    #map-canvas {
        width: 800px;
        height: 600px;
        text-align: center;
    }


</style>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/PosCtrl.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaL-       xHTY5NYNS6StKvA0TGsZYx3D44"></script>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script>
//angular.element($('#Test')).scope().PositionCtrl.addRectangle();
console.log($('#Test'));
var appElement = document.querySelector('[ng-app=myApp]');
var $scope = angular.element(appElement).scope();
$scope.$apply(function () {
    $scope.addRectangleMethod(2,2,2,2,"Hello");
});
</script>
</head>
<body id="Test" ng-app="myApp" ng-controller="PositionCtrl as Pos"   style="display: inline-block; margin: 0px 0px 0px 550px;  text-align: center;">


<div style="height: 100%; width: 100%;">
    <div id="map-canvas"></div>
</div>
<div>
    <form>
        <ul>
            <li ng-repeat="x in Pos.rectangles"><input ng-model="x.Name" ng-  change="x.tangleChange()" /> <b>South West Corner</b> {{x.Shape.getBounds().O.O}}  , {{x.Shape.getBounds().j.j}} <b>North East Corner</b>{{x.Shape.getBounds().O.j}}  , {{x.Shape.getBounds().j.O}}<button ng-click="Pos.deleteRec(x)">Delete</button>    </li>
        </ul>
        <button ng-click="Pos.save()">Save Settings</button>
        <button ng-click="Pos.addRectangle()">Add Area</button>
    </form>
</div>
</body>

@Scripts.Render("~/bundles/bootstrap")




</html>

角

/// <reference path="../../OciCP2.0/Scripts/typings/googlemaps/google.maps.d.ts" />
/// <reference path="../../OcCP2.0/Scripts/typings/angularjs/angular.d.ts" />
class Rectangle {
    
    //Rectangle class properties
    Shape: google.maps.Rectangle;
    InfoWindow: google.maps.InfoWindow;
    Name: string;
    constructor(map: google.maps.Map, pt1: google.maps.LatLng, pt2: google.maps.LatLng, info: string, $scope: ng.IScope) {
        //Set rectangle Options
        var options: google.maps.RectangleOptions = {
            editable: true,
            draggable: true

        }
        //Create Rectangle
        this.Shape = new google.maps.Rectangle({


            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
            map: map,
            bounds: new google.maps.LatLngBounds(pt1, pt2),

        });
        //Attach Options to rectangle
        this.Shape.setOptions(options);
        this.Name = info;
        //Create info window
        this.InfoWindow = new google.maps.InfoWindow({
            content: info,
            position: pt1

        });
        this.InfoWindow.setPosition(this.Shape.getBounds().getNorthEast());
        this.InfoWindow.open(map);
        google.maps.event.addListener(this.Shape, 'bounds_changed',() => {
            this.InfoWindow.setPosition(this.Shape.getBounds().getNorthEast());
            $scope.$apply();
            this.InfoWindow.open(map)
        });


    }
    tangleChange() {
        //Keep info content up to date
        this.InfoWindow.setContent(this.Name);

    }


}

class PositionCtrl {

 
    //Proporties of the controller
    MyMap: google.maps.Map;
    marker: google.maps.Marker;
    event: google.maps.event;
    rectangles: Rectangle[];
    lat: number; long: number; rad: number;
    //Save the changes
    save() {
        alert("Settings Saved");
    }




    constructor(private $scope: ng.IScope) {


        this.lat = 20;
        this.long = 20;
        this.rad = 10000;
        this.rectangles = new Array<Rectangle>();

        //Create map and bind to element
        var mapCanvas = document.getElementById('map-canvas');
        var mapOptions = {
            center: new google.maps.LatLng(Number(this.lat), Number(this.long)),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDoubleClickZoom: true
        }
        this.MyMap = new google.maps.Map(mapCanvas, mapOptions)
    }
    
    //Add rectangle to page
    addRectangle() {
        //Add rectangle to array 
        this.rectangles.push(
            new Rectangle(this.MyMap,
                new google.maps.LatLng(this.MyMap.getCenter().lat() - .5, this.MyMap.getCenter().lng() - .5),
                new google.maps.LatLng(this.MyMap.getCenter().lat() + .5, this.MyMap.getCenter().lng() + .5), "Enter Name", this.$scope)

            );



        console.log(this.rectangles);


    }
    addRectangleMethod(top, bottom, left, right, name) {
        console.log("Sucess");
        this.rectangles.push(
            new Rectangle(this.MyMap,
                new google.maps.LatLng(left, bottom),
                new google.maps.LatLng(right, top), name, this.$scope)

            );


    }
    //Remove Rectangle from map 
    deleteRec(x: Rectangle) {
        for (var i = 0; i < Rectangle.length; i++) {
            if (this.rectangles[i].InfoWindow.getContent() == x.InfoWindow.getContent()) {
                x.Shape.setMap(null);
                x.InfoWindow.close();
                this.rectangles.splice(i, 1);

            }
        }
        this.$scope.$apply();
    }
}


var myApp = angular.module('myApp', []);
myApp.controller("PositionCtrl", ["$scope", PositionCtrl]);

Answer 1

将addRectangleMethod从您的班级绑定到$scope

 constructor(private $scope: ng.IScope) {
  this.$scope.addRectangleMethod = () => this.addRectangleMethod();

从控制器外部添加到角度模型

1 个答案: