如何在angularjs中從相關項目的事件觸發另一個視圖的項目？

Question

我有一組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' 
    }); 
} 
); 

Answer 1

您可以嘗試使用$ broadcast和$ on傳遞並接收狀態變量。

$on and $broadcast in angular