如何在angularjs中从相关的item's事件中触发另一个视图's项
How to trigger another view's item from related item's event in angularjs?
我有一组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来传递和接收状态变量。
相关文章:
- 取消绑定主干视图事件
- 在Angular ui路由器中,如何将事件从一个视图发送到另一个视图
- 如何测试主干视图是否正确侦听特定事件
- Ember视图未响应用户启动的事件
- 主干视图触发全局事件
- WinJs中的视图状态更改事件在哪里
- IBM BPM如何在Coach视图中处理按键事件
- 更改el属性时未激发主干视图事件
- 缓存主干视图及其事件
- 为什么每次重新渲染父视图时都需要重新委派子视图的事件
- 如何在angularjs中检查Kendo树视图数据绑定事件
- 骨干视图触发事件两次
- 当我认为它不应该重新渲染视图时,如何防止 Meteor 在 html 选择 dom 单击事件上重新渲染视图
- 将多个事件动态添加到多个 Web 视图
- 触发的事件被接收两次.如何找到鬼视图
- MVC-部分视图中元素上的Javascript事件
- 视图焦点的AngularJS事件
- 是否有任何事件“;在$scope摘要完成时”;或“;在视图刷新时”;在Angular.js中
- 如何在渲染新视图之前关闭所有事件
- Angular.js-Socket.io事件更新模型,而不是视图