2015-11-07 93 views
9

後正確的語法我想升級到持續穩定的角度分支1.4.7。我來自1.2.13。 在我的項目中有一個爲應用程序定製的角單張指令。我想弄清楚如何改變函數中的語法,所以它不會引發錯誤。 控制檯消息如何角更新

Error: [$parse:syntax] Syntax Error: Token '.50465' is an unexpected token at column 8 of the expression [markers.50465] starting at [.50465]. 
http://errors.angularjs.org/1.4.7/$parse/syntax?p0=.50465&p1=is%20an%20unexpected%20token&p2=8&p3=markers.50465&p4=.50465 
at angular.js:68 
at Object.AST.throwError (angular.js:13057) 
at Object.AST.ast (angular.js:12827) 
at Object.ASTCompiler.compile (angular.js:13276) 
at Parser.parse (angular.js:14146) 
at $parse (angular.js:14248) 
at Scope.$watch (angular.js:15412) 
at createMarker (angular-leaflet-directive.js:1496) 
at Object.fn (angular-leaflet-directive.js:1158) 
at Scope.$digest (angular.js:15826)(anonymous function) @ angular.js:12477(anonymous function) @ angular.js:9246Scope.$digest @ angular.js:15844Scope.$apply @ angular.js:16097done @ angular.js:10546completeRequest @ angular.js:10744requestLoaded @ angular.js:10685 

功能 錯誤是在 '標記'。

// add new markers 
       for (var new_name in newMarkers) { 
        if (markers[new_name] === undefined) { 
         var newMarker = createMarker('markers.' + new_name, $scope.markers[new_name], map); 
         if (newMarker !== null) { 
          markers[new_name] = newMarker; 
         } 
        } 
       } 

1496行從這裏開始。

var clearWatch = $scope.$watch(scope_watch_name, function (data, old_data) { 
       if (!data) { 
        marker.closePopup(); 
        // There is no easy way to know if a marker is added to a layer, so we search for it 
        // if there are overlays 
        if (layers !== undefined && layers !== null) { 
         if (layers.overlays !== undefined) { 
          for (var key in layers.overlays) { 
           if (layers.overlays[key] instanceof L.LayerGroup) { 
            if (layers.overlays[key].hasLayer(marker)) { 
             layers.overlays[key].removeLayer(marker); 
            } 
           } 
          } 
         } 
        } 
        map.removeLayer(marker); 
        clearWatch(); 
        return; 
       } 

       if (old_data) { 

        //TODO Check for layers !== null 
        //TODO Check for layers.overlays !== null !== undefined 
        // It is possible the the layer has been removed or the layer marker does not exist 

        // Update the layer group if present or move it to the map if not 
        if (data.layer === undefined || data.layer === null || typeof data.layer !== 'string') { 
         // There is no layer information, we move the marker to the map if it was in a layer group 
         if (old_data.layer !== undefined && old_data.layer !== null && typeof old_data.layer === 'string') { 
          // Remove from the layer group that is supposed to be 
          if (layers.overlays[old_data.layer] !== undefined) { 
           if (layers.overlays[old_data.layer].hasLayer(marker)) { 
            layers.overlays[old_data.layer].removeLayer(marker); 
            // If the marker had a popup we close it because we do not know if the popup in on the map 
            // or on the layer group. This is ineficient, but as we can't check if the popup is opened 
            // in Leaflet we can't determine if it has to be open in the new layer. So removing the 
            // layer group of a marker always closes the popup. 
            // TODO: Improve popup behaviour when removing a marker from a layer group 
            marker.closePopup(); 
           } 
          } 
          // Test if it is not on the map and add it 
          if (!map.hasLayer(marker)) { 
           map.addLayer(marker); 
          } 
         } 
        } else if (old_data.layer === undefined || old_data.layer === null || old_data.layer !== data.layer) { 
         // If it was on a layer group we have to remove it 
         if (typeof old_data.layer === 'string') { 
          if (layers.overlays[old_data.layer] !== undefined) { 
           if (layers.overlays[old_data.layer].hasLayer(marker)) { 
            layers.overlays[old_data.layer].removeLayer(marker); 
           } 
          } 
         } 
         // If the marker had a popup we close it because we do not know how the new layer 
         // will be. This is ineficient, but as we can't check if the opoup is opened in Leaflet 
         // we can't determine if it has to be open in the new layer. So changing the layer group 
         // of a marker always closes the popup. 
         // TODO: Improve popup behaviour when changing a marker from a layer group 
         marker.closePopup(); 
         // Remove it from the map in case the new layer is hidden or there is an error in the new layer 
         if (map.hasLayer(marker)) { 
          map.removeLayer(marker); 
         } 
         // The data.layer is defined so we add the marker to the layer if it is different from the old data 
         if (layers.overlays[data.layer] !== undefined) { 
          // Is a group layer? 
          var layerGroup = layers.overlays[data.layer]; 
          if (layerGroup instanceof L.LayerGroup) { 
           // The marker goes to a correct layer group, so first of all we add it 
           layerGroup.addLayer(marker); 
           // The marker is automatically added to the map depending on the visibility 
           // of the layer, so we only have to open the popup if the marker is in the map 
           if (map.hasLayer(marker)) { 
            if (data.focus === true) { 
             marker.openPopup(); 
            } 
           } 
          } else { 
           $log.error('[AngularJS - Leaflet] A marker can only be added to a layer of type "group"'); 
          } 
         } else { 
          $log.error('[AngularJS - Leaflet] You must use a name of an existing layer'); 
         } 
        } else { 
         // Never has to enter here... 
        } 

        // Update the draggable property 
        if (data.draggable === undefined || data.draggable === null || data.draggable !== true) { 
         // If there isn't or wasn't the draggable property or is false and previously true update the dragging 
         // the !== true prevents for not boolean values in the draggable property 
         if (old_data.draggable !== undefined && old_data.draggable !== null && old_data.draggable === true) { 
          if (marker.dragging) { 
           marker.dragging.disable(); 
          } 
         } 
        } else if (old_data.draggable === undefined || old_data.draggable === null || old_data.draggable !== true) { 
         // The data.draggable property must be true so we update if there wasn't a previous value or it wasn't true 
         if (marker.dragging) { 
          marker.dragging.enable(); 
         } else { 
          if (L.Handler.MarkerDrag) { 
           marker.dragging = new L.Handler.MarkerDrag(marker); 
           marker.options.draggable = true; 
           marker.dragging.enable(); 
          } 
         } 
        } 

        if (data.zIndexOffset && data.zIndexOffset != old_data.zIndexOffset) { 
         marker.setZIndexOffset(data.zIndexOffset); 
        } 

        // Update the icon property 
        if (data.icon === undefined || data.icon === null || typeof data.icon !== 'object') { 
         // If there is no icon property or it's not an object 
         if (old_data.icon !== undefined && old_data.icon !== null && typeof old_data.icon === 'object') { 
          // If there was an icon before restore to the default 
          marker.setIcon(new LeafletIcon()); 
          marker.closePopup(); 
          marker.unbindPopup(); 
          if (data.message !== undefined && data.message !== null && typeof data.message === 'string' && data.message !== "") { 
           marker.bindPopup(data.message, { 
            autoPan: data.popupOptions ? (data.popupOptions.autoPan ? true : false) : true 
           }); 
          } 
         } 
        } else if (old_data.icon === undefined || old_data.icon === null || typeof old_data.icon !== 'object') { 
         // The data.icon exists so we create a new icon if there wasn't an icon before 
         var dragA = false; 
         if (marker.dragging) { 
          dragA = marker.dragging.enabled(); 
         } 
         if (Helpers.AwesomeMarkersPlugin.is(data.icon)) { 
          // This icon is a L.AwesomeMarkers.Icon so it is using the AwesomeMarker PlugIn 
          marker.setIcon(data.icon); 
          // As the new icon creates a new DOM object some elements, as drag, are reseted. 
         } else if (Helpers.Leaflet.DivIcon.is(data.icon) || Helpers.Leaflet.Icon.is(data.icon)) { 
          // This is a Leaflet.DivIcon or a Leaflet.Icon 
          marker.setIcon(data.icon); 
         } else { 
          // This icon is a icon set in the model trough options 
          marker.setIcon(new LeafletIcon(data.icon)); 
         } 
         if (dragA) { 
          marker.dragging.enable(); 
         } 
         marker.closePopup(); 
         marker.unbindPopup(); 
         if (data.message !== undefined && data.message !== null && typeof data.message === 'string' && data.message !== "") { 
          marker.bindPopup(data.message, { 
           autoPan: data.popupOptions ? (data.popupOptions.autoPan ? true : false) : true 
          }); 
         } 

        } else { 
         if (Helpers.AwesomeMarkersPlugin.is(data.icon)) { 
          // This icon is a L.AwesomeMarkers.Icon so it is using the AwesomeMarker PlugIn 
          if (!Helpers.AwesomeMarkersPlugin.equal(data.icon, old_data.icon)) { 
           var dragD = false; 
           if (marker.dragging) { 
            dragD = marker.dragging.enabled(); 
           } 
           marker.setIcon(data.icon); 
           // As the new icon creates a new DOM object some elements, as drag, are reseted. 
           if (dragD) { 
            marker.dragging.enable(); 
           } 
           //TODO: Improve depending on anchorPopup 
           // metrostudy 
           marker.closePopup(); 
           if (marker._popup && marker._popup._isOpen) { 
            marker.unbindPopup(); 
           } 
           if (data.message !== undefined && data.message !== null && typeof data.message === 'string' && data.message !== "") { 
            marker.bindPopup(data.message, { 
             autoPan: data.popupOptions ? (data.popupOptions.autoPan ? true : false) : true 
            }); 
           } 
          } 
         } else if (Helpers.Leaflet.DivIcon.is(data.icon)) { 
          // This is a Leaflet.DivIcon 
          if (!Helpers.Leaflet.DivIcon.equal(data.icon, old_data.icon)) { 
           var dragE = false; 
           if (marker.dragging) { 
            dragE = marker.dragging.enabled(); 
           } 
           marker.setIcon(data.icon); 
           // As the new icon creates a new DOM object some elements, as drag, are reseted. 
           if (dragE) { 
            marker.dragging.enable(); 
           } 
           //TODO: Improve depending on anchorPopup 
           marker.closePopup(); 
           marker.unbindPopup(); 
           if (data.message !== undefined && data.message !== null && typeof data.message === 'string' && data.message !== "") { 
            marker.bindPopup(data.message, { 
             autoPan: data.popupOptions ? (data.popupOptions.autoPan ? true : false) : true 
            }); 
           } 
          } 
         } else if (Helpers.Leaflet.Icon.is(data.icon)) { 
          // This is a Leaflet.DivIcon 
          if (!Helpers.Leaflet.Icon.equal(data.icon, old_data.icon)) { 
           var dragF = false; 
           if (marker.dragging) { 
            dragF = marker.dragging.enabled(); 
           } 
           marker.setIcon(data.icon); 
           // As the new icon creates a new DOM object some elements, as drag, are reseted. 
           if (dragF) { 
            marker.dragging.enable(); 
           } 
           //TODO: Improve depending on anchorPopup 
           // metrostudy 
           //marker.closePopup(); 
           //marker.unbindPopup(); 
           //if (data.message !== undefined && data.message !== null && typeof data.message === 'string' && data.message !== "") { 
           // marker.bindPopup(data.message, { 
           //  autoPan: data.popupOptions ? (data.popupOptions.autoPan ? true : false) : true 
           // }); 
           //} 
          } 
         } else { 
          // This icon is an icon defined in the marker model through options 
          // There is an icon and there was an icon so if they are different we create a new icon 
          if (JSON.stringify(data.icon) !== JSON.stringify(old_data.icon)) { 
           var dragG = false; 
           if (marker.dragging) { 
            dragG = marker.dragging.enabled(); 
           } 
           marker.setIcon(new LeafletIcon(data.icon)); 
           if (dragG) { 
            marker.dragging.enable(); 
           } 
           //TODO: Improve depending on anchorPopup 
           marker.closePopup(); 
           marker.unbindPopup(); 
           if (data.message !== undefined && data.message !== null && typeof data.message === 'string' && data.message !== "") { 
            marker.bindPopup(data.message, { 
             autoPan: data.popupOptions ? (data.popupOptions.autoPan ? true : false) : true 
            }); 
           } 
          } 
         } 
        } 

        // Update the Popup message property 
        if (data.message === undefined || data.message === null || typeof data.message !== 'string' || data.message === "") { 
         // There is no popup to show, so if it has previously existed it must be unbinded 
         if (old_data.message !== undefined && old_data.message !== null && typeof old_data.message === 'string' && old_data.message !== "") { 
          marker.closePopup(); 
          marker.unbindPopup(); 
         } 
        } else { 
         // There is some text in the popup, so we must show the text or update existing 
         if (old_data.message === undefined || old_data.message === null || typeof old_data.message !== 'string' || old_data.message === "") { 
          // There was no message before so we create it 
          marker.bindPopup(data.message, { 
           autoPan: data.popupOptions ? (data.popupOptions.autoPan ? true : false) : true 
          }); 
         } else if (data.message !== old_data.message) { 
          // There was a different previous message so we update it 
          marker.setPopupContent(data.message); 
         } 
        } 

        // Update the focus property 
        if (data.focus && !old_data.focus) { 
         // The data.focus property must be true so we update if there wasn't a previous value or it wasn't true 
         marker.openPopup(); 
        } 

        // Update the lat-lng property (always present in marker properties) 
        if (data.lat === undefined || data.lat === null || isNaN(data.lat) || typeof data.lat !== 'number' || data.lng === undefined || data.lng === null || isNaN(data.lng) || typeof data.lng !== 'number') { 
         $log.warn('There are problems with lat-lng data, please verify your marker model'); 
         // Remove the marker from the layers and map if it is not valid 
         if (layers !== null) { 
          if (layers.overlays !== undefined && layers.overlays !== null) { 
           for (var olname in layers.overlays) { 
            if (layers.overlays[olname] instanceof L.LayerGroup || Helpers.MarkerClusterPlugin.is(layers.overlays[olname])) { 
             if (layers.overlays[olname].hasLayer(marker)) { 
              layers.overlays[olname].removeLayer(marker); 
             } 
            } 
           } 
          } 
         } 
         map.removeLayer(marker); 
        } else { 
         var cur_latlng = marker.getLatLng(); 
         // On dragend event, scope will be updated, which 
         // tirggers this watch expression. Then we call 
         // setLatLng and triggers move event on marker and 
         // causes digest already in progress error. 
         // 
         // This check is to make sure we don't trigger move 
         // event manually after dragend, which is redundant 
         // anyway. Because before dragend event fired, marker 
         // sate is already updated by leaflet. 
         if (cur_latlng.lat !== data.lat || cur_latlng.lng !== data.lng) { 
          // if the marker is in a clustermarker layer it has to be removed and added again to the layer 
          var isCluster = false; 
          if (data.layer !== undefined && data.layer !== null && typeof data.layer === 'string') { 
           if (Helpers.MarkerClusterPlugin.is(layers.overlays[data.layer])) { 
            layers.overlays[data.layer].removeLayer(marker); 
            isCluster = true; 
           } 
          } 
          marker.setLatLng([data.lat, data.lng]); 
          if (isCluster) { 
           layers.overlays[data.layer].addLayer(marker); 
          } 
         } 
        } 
       } 
      }, true); 
+1

請參閱更新。讓我知道我應該發佈什麼! – texas697

+0

您需要通過'markers ['+ id +']'來訪問標記。數字不是有效的Javascript標識符。如果您需要更具體的建議,請在構建'scope_watch_name'的地方共享代碼。 –

+0

我將整個腳本粘貼在js文件中。我無法弄清楚它在哪裏被定義。 http://plnkr.co/edit/dmxX3vPnHiNQrKCwhUGu?p=catalogue – texas697

回答

2

您試圖訪問通過屬性點符號數組元素。這不是一個有效的結構,你需要使用括號標記 - []

的問題來自於監視表達式是markers.12345,從createMarker('markers.' + name, ...)服用。所以,而不是寫createMarker('markers[' + name + ']', ...)