Question

使用Angular / UI-Router，是否可以从viewB@stateA.stateB＆＃39; s控制器中更改viewA @ stateA中的元素类？没有改变状态？

以下是我的州定义：

.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相关联...我需要根据这些路径在这些路径上打开或关闭一个类或者不是关联的id在该列表中。

我尝试使用暴露要共享的对象的服务，然后使用带有像SharingService.SharedObject.MyList.indexOf（id）＆gt;这样的表达式的ng-class。 -1但无法使其发挥作用。

另外值得注意的是，SVG是在自定义指令中使用d3创建的，该指令经过编译，以便角度指令正常工作。

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

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

所以，如果你做$观看

$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-Router ...是否可以从viewB@stateA.stateB＆＃39更改viewA @ stateA中的元素类;

1 个答案:

Short way to replace content of an array