將角度值設置爲自定義指令鏈接屬性中的出廠值

Question

我的問題是，我想根據點擊的指令元素來顯示div。但是指令和div不在同一個控制器中，因此我想在工廠中設置值並將其傳遞給另一個控制器，但在另一個控制器中未定義工廠屬性。

代碼片段， 的地方，我的值設置爲屬性

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 
    }; 
}]); 

接收控制器，

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 
 
    }; 
 
}]);

和接收控制器，

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); 
 
    } 
 
}]);