javascript - 在 Angular 中的自定义指令链接属性中将值设置为工厂

Question

我的问题是，我想根据单击的指令元素显示一个 div。但指令和div不在同一个 Controller 中，因此我想在工厂中设置值并将其传递给另一个 Controller ，但工厂属性在另一个 Controller 中未定义。

代码片段，我将值设置为属性的地方

app.directive("sideNavDiv", ['$rootScope','$window',function(layerFactory,$location) {

    function linkFunction(scope,elem,attrs) {

        elem.bind('click',function(){
          if(scope.info.content == 'Heat Map') {
            layerFactory.showLayer = "block";
          }else {
            layerFactory.showLayer = "none";
          }

          $location.path = scope.info.link;
          console.log(layerFactory);
        });

    }

    return {
        restrict: 'E',
        scope: {
            info: '=item'
        },
        templateUrl: '../directive-templates/side-nav-div.html',
        link:linkFunction
    };
}]);

接收 Controller ，

app.controller('mapController', ['$scope','$rootScope', function($scope,layerFactory) {

    $scope.layer1 = { classes: "danger-layer", top: "0", link: "/details", tooltip:"Need to automate", display:layerFactory.showLayer };
    $scope.layer2 = { classes: "safe-layer", top: "33", link: "/details", tooltip:"In good condition", display:"none" };
    $scope.layer3 = { classes: "over-water-layer", top: "66", link: "/details", tooltip:"To much water", display:"none" };

    $scope.loadMap = function(latlng, zoom) {
      console.log("Layer : " + layerFactory.showLayer);
        var options = {
            draggable: false,
            scrollwheel: false,
            panControl: false,
            zoom: zoom,
            center: latlng,
            keyboardShortcuts: false
        };
        var map = new google.maps.Map(document.getElementById('map'), options);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map
        });
        //renderLayers();
    };

    $scope.loadOverallProgress = function() {
        color_scheme = { less: "red", ok: "yellow", good: "green", tomuch: "blue", otherwise:"purple" };

        $("#overall-status-meter").circularProgress({
            line_width: 20,
            color: color_scheme.otherwise,
            starting_position: 0,
            percent: 0, // start from
            percentage: true,
            height : "250px",
            width: "250px"
        }).circularProgress('animate', 67, 2000);
    }
}]);

Answer 1

不要使用 $rootscope 作为工厂，这是一个不好的做法。我建议您创建一个带有 geter 和 seter 的新工厂，如下所示:

app.factory('dataRetrievalFactory', function(){
    return{
        data:{},
        get:function(name){
            return this.data[name];
        },
        set:function(name, value){
            this.data[name] = value;
        }
    }
})

之后你可以像这样使用它:

app.directive("sideNavDiv", ['dataRetrievalFactory','$window',function(dataRetrievalFactory,$window) {

    function linkFunction(scope,elem,attrs) {

        elem.bind('click',function(){
          if(scope.info.content == 'Heat Map') {
            dataRetrievalFactory.set('showLayer','block');
          }else {
            dataRetrievalFactory.set('showLayer','none');
          }

          $window.path = scope.info.link;
        });

    }

    return {
        restrict: 'E',
        scope: {
            info: '=item'
        },
        templateUrl: '../directive-templates/side-nav-div.html',
        link:linkFunction
    };
}]);

和接收 Controller ，

app.controller('mapController', ['$scope','dataRetrievalFactory', function($scope,dataRetrievalFactory) {

    $scope.layer1 = { classes: "danger-layer", top: "0", link: "/details", tooltip:"Need to automate", display:dataRetrievalFactory.get('showLayer') };
    $scope.layer2 = { classes: "safe-layer", top: "33", link: "/details", tooltip:"In good condition", display:"none" };
    $scope.layer3 = { classes: "over-water-layer", top: "66", link: "/details", tooltip:"To much water", display:"none" };

    $scope.loadMap = function(latlng, zoom) {
      console.log("Layer : " + dataRetrievalFactory.get('showLayer'));
        var options = {
            draggable: false,
            scrollwheel: false,
            panControl: false,
            zoom: zoom,
            center: latlng,
            keyboardShortcuts: false
        };
        var map = new google.maps.Map(document.getElementById('map'), options);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map
        });
        //renderLayers();
    };

    $scope.loadOverallProgress = function() {
        color_scheme = { less: "red", ok: "yellow", good: "green", tomuch: "blue", otherwise:"purple" };

        $("#overall-status-meter").circularProgress({
            line_width: 20,
            color: color_scheme.otherwise,
            starting_position: 0,
            percent: 0, // start from
            percentage: true,
            height : "250px",
            width: "250px"
        }).circularProgress('animate', 67, 2000);
    }
}]);