javascript - 无法调用 Angular Controller 的内部函数

Question

我想调用 Angular Controller 的内部函数。

index.html

<script type="text/javascript">
        $(document).ready(function() {
            $('#example').multiselect({
                onChange: function(option, checked, select) {
                    //alert('Changed option ' + $(option).val() + '.');
                    var scope = angular.element(document.getElementById("MainWrap")).scope();

                    var n = $(option).val();

                    scope.$apply(function () {createMarker(data[n-1]);});             

                }
            });
        });
    </script>

controller.js

var mapApp = angular.module('mapApp', []);

mapApp.controller('mapContainer',function($scope){

    var mapOptions = {
        zoom: 10,
        center: new google.maps.LatLng(12,77),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }

    $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

    $scope.markers = [];
    var createMarker = function (info){

        var marker = new google.maps.Marker({
            map: $scope.map,
            position: new google.maps.LatLng(info.lat, info.long),
            name: info.name
        });
        $scope.markers.push(marker);

    };

});

我能够在mapApp.controller内控制台日志数据，但在调用createMarker函数时显示错误:createMarker未定义错误。按照此示例公开 Controller http://jsfiddle.net/austinnoronha/nukRe/light/

Answer 1

该函数只有在 $scope 上公开时才可调用。

$scope.createMarker = function (info){
    var marker = new google.maps.Marker({
        map: $scope.map,
        position: new google.maps.LatLng(info.lat, info.long),
        name: info.name
    });
    $scope.markers.push(marker);
};

在您的模板中，您还需要通过 Controller 范围访问它:

scope.$apply(function () {scope.createMarker(data[n-1]);}); 

这假设您正在检索的范围对象与 mapContainer 的范围相关。

值得注意的是，这是一种非常反 Angular 做事方式。正确的方法是创建一个指令驱动的组件。