Angular UI-路由器...是否可以从 viewB@stateA.stateB 更改 viewA@stateA 中元素的 class'

Question

使用 Angular/UI-Router，是否可以从 viewB@stateA.stateB 的控制器更改 viewA@stateA 中元素的 class？不改变状态？

这是我的状态定义：

.state('map', {
    url: '/map',
    views:
    {
        '': {
            templateUrl: 'Views/templates/layout.html'
        },
        ......
        'kymap@map': {
            templateUrl: 'Views/templates/ky.map.html',
            controller: 'MapController'
        }
    }
})
.state('map.districts', {
    params: { fips: null },
    views:
    {
        'districtlist': {
            templateUrl: 'Views/templates/county.districts.html',
            controller: 'CountyDetailsController'
        }
    }
})
.....
.state('map.distributordistricts', {
    params: { distributorid: null, distributorname: null },
    views:
    {
        'distributordistricts': {
            templateUrl: 'Views/templates/distributor.districts.html',
            controller: 'DistributorDistrictsListController'
        }
    }
})
.....

编辑：添加了相关服务和控制器代码

// the Sharing Service
 app.factory('HighlightService', function () {
    return {
        sharedObject: { data: [] }
    };
});

// Controller that has the data I want to share with the other controller
 app.controller('DistributorDistrictsListController', ['$scope', '$state', '$stateParams', 'DistributorDistrictsService', 'HighlightService',
    function ($scope, $state, $stateParams, DistributorDistrictsService, HighlightService) {
        $scope.distributorname = $stateParams.distributorname;
        $scope.distributordistricts = DistributorDistrictsService.query({ id: $stateParams.distributorid })

        $scope.distributordistricts.$promise.then(function (data) {

            var countyfpList = [];

            for (var i = 0; i < data.length; i++) {
                countyfpList.push(data[i].CountyFP);
            }
            // clear
            HighlightService.sharedObject.data.length = 0;
            // 2. fill the first array with items from the second
            [].push.apply(HighlightService.sharedObject.data, countyfpList);

        });


        $scope.showDetail = function (id) {
            $state.go('map.districtdetails', { districtid: id });
        }
}]);

// controller I want to get the data (without activating its state.
// i simply want an ng-class directive's expression to act on it.
/* Map Controller  */
app.controller('MapController', ['$scope', '$state', 'HighlightService', function ($scope, $state, HighlightService) {
    $scope.showDetail = function (fips) {
        $scope.toggleActiveCountyFP = fips;
        $state.go('map.districts', { fips: fips });
    }

    $scope.$watch('HighlightService.sharedObject.data', function (newValue, oldValue) {
        console.log(newValue)
    }, true);
}]);

编辑结束

来自 DistributorDistrictsListController，我有一个县代码列表，这些代码与 kymap@map 中的几个 SVG 路径元素的 ID 相关联...我需要根据这些路径打开或关闭 class关于关联的 ID 是否在该列表中。

我尝试使用公开对象共享的服务，然后将 ng-class 与 SharingService.SharedObject.MyList.indexOf(id) > -1 之类的表达式一起使用，但无法获取它工作。

另请注意，SVG 是在自定义指令中使用 d3 创建的，该指令经过编译，因此 angular 指令可以正常工作。

任何人都可以提供一些见解，或者一个简单的例子吗？

Answer 1

一般有两种方式

1) 使用服务（如您所试）
2) UI-Router - How do I share $scope data between states in angularjs ui-router?

范围继承带来的收益

以防万一该服务不适合您 - 请确保您不要将引用...更改为共享数组：

Short way to replace content of an array

所以，如果你 $watch

$scope.$watch('SharingService.SharedObject.MyList', ...

您应该始终保留其引用，即使在替换内容时也是如此

// clear
SharingService.SharedObject.MyList.length = 0;
// 2. fill the first array with items from the second
[].push.apply(SharingService.SharedObject.MyList, someSource);

因为

SharingService.SharedObject.MyList = someSource // any[]

会更改引用

Angular UI-路由器...是否可以从 viewB@stateA.stateB 更改 viewA@stateA 中元素的 class'

Angular UI-Router... is it possible to change an element's class in viewA@stateA from viewB@stateA.stateB'

state

angularjs

angularjs-service

angular-ui-router

Short way to replace content of an array