如何在AngularJS中为bpmn-js创建独立属性面板并绑定元素属性

Hey there! Let's walk through how to bind your custom properties between an AngularJS standalone property panel and the bpmn-js modeler—this is totally doable once you connect the two systems properly. Here's a step-by-step breakdown tailored to your setup:

First, you need to link the bpmn-js modeler's event system to your AngularJS scope. The key event here is selection.changed—it fires whenever a user clicks an element in the modeler. We'll use this to sync the selected element to your AngularJS controller.

In your AngularJS controller where you initialize the bpmn-js modeler:

app.controller('BpmnEditorController', ['$scope', function($scope) {
  // Initialize bpmn-js modeler with your custom elements/moddle config
  $scope.modeler = new BpmnJS({
    container: '#bpmn-modeler',
    moddleExtensions: {
      // Your existing custom namespace setup (e.g., for "my:customProperty")
      myCustom: {
        uri: 'http://your-domain.com/custom',
        prefix: 'my',
        types: [
          {
            name: 'CustomStartEvent',
            extends: 'bpmn:StartEvent',
            properties: [
              { name: 'customProperty', isAttr: true, type: 'String' }
            ]
          }
        ]
      }
    }
  });

  // Listen for element selection changes in bpmn-js
  $scope.modeler.on('selection.changed', function(event) {
    const selectedElement = event.newSelection[0];
    
    // Sync to AngularJS scope (use $apply to trigger digest cycle)
    $scope.$apply(function() {
      $scope.selectedElement = selectedElement;
      
      // Pull existing custom property value (if exists)
      if (selectedElement) {
        $scope.customPropertyValue = selectedElement.get('my:customProperty') || '';
      } else {
        $scope.customPropertyValue = '';
      }
    });
  });
}]);

Create a simple view for your property panel, bound to the scope variables we set up. This will let users edit the custom property directly:

<div class="app-container">
  <!-- bpmn-js Modeler -->
  <div id="bpmn-modeler"></div>

  <!-- Custom Property Panel -->
  <div ng-controller="BpmnEditorController" class="property-panel">
    <h3>Custom Element Properties</h3>
    <div ng-if="selectedElement">
      <label for="customProp">My Custom Property:</label>
      <input 
        type="text" 
        id="customProp" 
        ng-model="customPropertyValue"
        ng-change="updateElementProperty()"
        placeholder="Enter value..."
      >
    </div>
    <p ng-if="!selectedElement">Select an element (like a Start Event) to edit properties</p>
  </div>
</div>

Add the updateElementProperty function to your controller to push changes from the property panel back to the bpmn-js modeler. We'll use bpmn-js's modeling service to update the element's properties:

// Inside BpmnEditorController
$scope.updateElementProperty = function() {
  if (!$scope.selectedElement) return;

  // Get the modeling service from bpmn-js
  const modeling = $scope.modeler.get('modeling');
  
  // Update the custom property on the selected element
  modeling.updateProperties($scope.selectedElement, {
    'my:customProperty': $scope.customPropertyValue
  });
};

• Namespace Consistency: Make sure your custom property's namespace (e.g., my:) matches exactly what you defined in moddleExtensions—bpmn-js won't recognize the property if they don't align.
• AngularJS Digest Cycle: Always wrap bpmn-js event callbacks in $scope.$apply()—bpmn-js events fire outside Angular's default digest cycle, so this ensures your scope updates are reflected in the view.
• Default Values: Handle cases where the custom property doesn't exist yet (use || '' to set a default empty string, like we did in the selection handler).

内容的提问来源于stack exchange，提问作者Abu Zoha