test/property-binding.html

<!DOCTYPE html>
<html ng-app="esri-map-example">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
        <title>Property Binding</title>

        <!-- load Esri CSS -->
        <link rel="stylesheet" type="text/css" href="//js.arcgis.com/4.0/esri/css/main.css">
        <style type="text/css">
            .esri-view {
                height: 400px;
            }
        </style>
    </head>
    <body>
        <h2>Property Binding</h2>
        <div ng-controller="ExampleController as exampleCtrl">
            <p>These properties are updated directly by the MapView:</p>
            <ul>
                <li><strong>Lat:</strong> {{ exampleCtrl.mapView.center.latitude | number:3 }}, <strong>Lng:</strong> {{ exampleCtrl.mapView.center.longitude | number:3 }}</li>
                <li><strong>Scale:</strong> {{ exampleCtrl.mapView.scale | number:2 }}</li>
                <li><strong>Zoom:</strong> {{ exampleCtrl.mapView.zoom | number:2 }}</li>
            </ul>

            <p>This property can be changed by interacting with the input form <strong>and</strong> the MapView:</p>
            <ul>
                <li><strong>Rotation:</strong> <input type="number" ng-model="exampleCtrl.mapView.rotation" /></li>
            </ul>
            
            <esri-map-view map="exampleCtrl.map" on-create="exampleCtrl.onViewCreated"
                view-options="{
                    zoom: 11,
                    center: [-6.66, 62.23]
                }">
            </esri-map-view>
        </div>

        <!-- load Esri JavaScript API -->
        <script src="//js.arcgis.com/4.0/"></script>
        <!-- load Angular -->
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
        <!-- load angular-esri-map directives -->
        <script src="lib/angular-esri-map.js"></script>
        <!-- run example app controller -->
        <script type="text/javascript">
            angular.module('esri-map-example', ['esri.map'])
                .controller('ExampleController', function(esriLoader, $scope) {
                    var self = this;

                    esriLoader.require('esri/Map', function(Map) {
                        // Create the map
                        self.map = new Map({
                            basemap: 'satellite'
                        });
                    });

                    this.onViewCreated = function(view) {
                        self.mapView = view;
                        // Setup a JSAPI 4.x property watch outside of Angular
                        //  and update bound Angular controller properties.
                        self.mapView.watch('center,scale,zoom,rotation', function() {
                            $scope.$applyAsync('exampleCtrl.mapView');
                        });
                    };
                });
        </script>
    </body>
</html>