AngularJS中如何将ui-select2的change事件传递给$scope.$on？

Great question! To pass ui-select2's change event to a $scope.$on listener in AngularJS, you'll need to bridge the gap between the jQuery-based select2 plugin and Angular's scope event system. Here's a step-by-step breakdown with practical code examples:

Step 1: Capture ui-select2's change event and broadcast an Angular scope event #

First, you need to listen to select2's native change/select event, then use Angular's $broadcast or $emit to send a custom event through the scope chain. This lets any $scope.$on listener pick up the event later.

Option A: Using the on-select attribute in the template

If you're using the ui-select2 directive directly in your template:

<ui-select2 ng-model="selectedOption" on-select="handleSelect2Change($item)">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</ui-select2>

In your controller, define the handler function that broadcasts the event:

$scope.handleSelect2Change = function(selectedItem) {
  // Broadcast the event down to child scopes (use $emit to send up to parent scopes)
  $scope.$broadcast('select2:valueChanged', selectedItem);
};

Option B: Using select2's config object

If you're configuring select2 via a controller-side config object:

<input type="hidden" ui-select2="select2Config" ng-model="selectedOption">

In your controller:

$scope.select2Config = {
  placeholder: 'Select an option',
  data: [{id: 'option1', text: 'Option 1'}, {id: 'option2', text: 'Option 2'}],
  onSelect: function(item) {
    // Wrap in $apply to trigger Angular's digest cycle (critical for jQuery plugins)
    $scope.$apply(function() {
      $scope.$broadcast('select2:valueChanged', item);
    });
  }
};

Step 2: Listen to the custom event with $scope.$on #

Now you can listen to the broadcasted event anywhere in your scope hierarchy using $scope.$on:

$scope.$on('select2:valueChanged', function(event, selectedItem) {
  // Your logic here: handle the select2 change
  console.log('Select2 selected item:', selectedItem);
  
  // If you want to reuse your existing $stateChangeStart logic, call a shared function
  $scope.processUnsavedChanges(function() {
    // Logic to run after confirming, e.g., update the model or trigger state changes
    $scope.selectedOption = selectedItem;
  });
});

Bonus: Reuse your existing $stateChangeStart logic #

Since you already have logic for handling unsaved changes during state transitions, refactor it into a reusable function to call from both events:

// Shared function for handling unsaved changes
$scope.processUnsavedChanges = function(onConfirm) {
  if (/* your unsaved change condition */) {
    $modal.open({
      templateUrl: 'prompt modal template',
      controller: 'prompt modal controller',
      backdrop: 'static',
      size: 'sm'
    }).result.then(function(result) {
      if (result === 'confirm') {
        myService.doSomething(arg).then(function(serviceResult) {
          $scope.doAnotherThing();
          // Execute post-confirmation logic
          if (typeof onConfirm === 'function') onConfirm(serviceResult);
        });
      }
    });
  } else {
    // No unsaved changes, proceed immediately
    if (typeof onConfirm === 'function') onConfirm();
  }
};

// Existing state change handler
$scope.$on("$stateChangeStart", function(event, toState) {
  if (/* your condition */) {
    event.preventDefault();
    $scope.processUnsavedChanges(function() {
      $state.go(toState.name, toState.params);
    });
  }
});

Key Notes: #

• Digest Cycle: Always wrap interactions with jQuery plugins (like select2) in $scope.$apply() to ensure Angular picks up changes to the scope.
• Event Propagation: Use $broadcast to send events down to child scopes, or $emit to send them up to parent scopes—choose based on your app's scope hierarchy.

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