如何在angularjs中从相关的item's事件中触发另一个视图's项

How to trigger another view's item from related item's event in angularjs?

本文关键字:事件 视图 另一个 item angularjs      更新时间:2023-09-26

我有一组JSON数据填充angularjs中的两个视图项。我需要在一个视图中触发一个图标更改,鼠标进入另一个视图中的列表项。我该如何做到这一点?

HTML:

<div ng-app="homeApp">
    <div class="row" ng-controller="HomeMapController" ng-init="init()">
        <div ui-view="mapView" class="col-lg-8"></div>
        <div ui-view="mapListView" class="col-lg-4"></div>
    </div>
</div>

地图视图:

<map style="height:400px;" center="-34.397, 150.644" zoom="8" zoom-to-include-markers="auto">
    <marker icon="{{transmitterIcon}}" ng-repeat="transmitter in transmitters" position="{{transmitter.location.lat}},{{transmitter.location.lng}}" />
</map>

列表视图:

<div style="background-color: #f0f7fd; height: 400px; overflow-y: hidden;">
    <div class="list-group">
        <a href="#" class="list-group-item" ng-mouseover="highlightMarker(transmitter)" ng-repeat="transmitter in transmitters">
            <h4 class="list-group-item-heading">{{transmitter.frequency}} {{transmitter.mode}} @ {{transmitter.time_on_str}} UTC</h4>
        <p class="list-group-item-text">
            {{transmitter.description}}
            <br>
            {{transmitter.location.site}}
        </p>
    </a>
</div>

JS:

var homeApp = angular.module('homeApp', [
'ui.router',
'ngMap'
]);
homeApp.controller('HomeMapController', ['$scope', '$http', function($scope, $http) {
$scope.test = 'Test';
$scope.transmitterIcon = {
    url: globals.assetsurl + 'images/maps/google-icons/radio-station-2.png',
    size: [32,37],
    origin: [0,0],
    anchor: [16,37]
};
$scope.getLocations = function() {
    $http.get(globals.ajaxurl + 'index.php').success(function(data, success) {
        $scope.transmitters = data;
    }).error(function(error) {});
};
$scope.highlightMarker = function(obj) {
    // need this to manipulate marker in map when mouse event occurs in list
    console.log(obj);
};
$scope.init = function() {
    $scope.getLocations();
};
}]);
homeApp.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('index', {
        url: '',
        views: {
            mapView: {templateUrl: '/assets/js/index/partials/map.html'},
            mapListView: {templateUrl: '/assets/js/index/partials/mapList.html' }
            },
        controller: 'HomeMapController'
    });
}
);

您可以尝试使用$broadcast和$on来传递和接收状态变量。