javascript - Angular Directive(指令) select2-blur 事件未按预期工作

Question

我有以下指令:

angular.module('click-to-edit-select2', [])
.directive("clickToEditSelect2", function() {
  var editorTemplate = '<td id="4" class="click-to-edit-select2">' +
  '<div id="3" style="height:20px" ng-click="enableEditor()" ng-hide="view.editorEnabled">' +
  '{{value}} ' +
  '</div>' +
  '<div id="2" ng-show="view.editorEnabled" style="padding:0px 10px 0px 0px";>' +
  '<input id="1" type="hidden" ui-select2="select2Options" ng-model="view.editableValue" ng-change="changeText()" />' +
  '</div>' +
  '</td>';

  return {
      restrict: "A",
      replace: true,
      template: editorTemplate,
      scope: {
          value: "=clickToEditSelect2"
      },
      controller: function($scope, $element, $attrs) {
          $scope.view = {
              //editableValue: $scope.term.TermId.id,
              editorEnabled: false
          };


          $scope.enableEditor = function() {
              if ($scope.$parent.term.Status == "new") {
                  $scope.view.editorEnabled = true;
                  $scope.view.editableValue = $scope.value;

              }
          };



          $scope.disableEditor = function() {
              $scope.view.editorEnabled = false;
          };

          $scope.save = function() {
              //alert($scope.term.TermId.id);
              $scope.value = $scope.view.editableValue.id;
              $scope.disableEditor();
          };

          $scope.$watch('view.editableValue', function(newVal, oldVal) {
              if (newVal != undefined && newVal != "") {
                  if (oldVal == newVal) return;
                  $element.addClass('valueChangedTD');
                  var str = newVal.text;
                  var res = str.split(" - ");
                  //slice the termID
                  res.splice(res.length - 1, 1);

                  var termDescription = res.join(' - ');

              }
          }, true);

          //select2 has its own blur event !
          $element.on('select2-blur', function(event) {
              $scope.save();
          });

          var initSelectionCb = function(item, callback) {
              if (item != "") {
                  var id = item.val();
                  var data = { id: id, text: id };
                  callback(data);
              }
          };

          $scope.select2Options = {
              placeholder: "Select Terminal",
              dropdownAutoWidth: 'true',
              multiple: false,
              width: "resolve",
              selectOnBlur: true,  //this does not seem to work
              initSelection: function(item, callback) {
                  //selects the initial item
                  initSelectionCb.call(self, item, callback);
              },
              ajax: {

                  url: "/GetDataSelect2",
                  type: "POST",
                  contentType: "application/json",
                  data: function(term, page) {

                      var Json = {};
                      Json.term = term;
                      Json.page = page;
                      Json.limit = 10;

                      return Json;

                  },
                  results: function(data, page) {
                      return { results: data.options };
                  }
              }
          }


      }
  };

});

使用 select2 3.4.8 Bootstrap 2.3.1 Angular 1.2.19

如您所见，我已经设置了 onSelectBlur 选项(我已经尝试过“true”和“true”)，但它不起作用。

我为 select2-blur 事件添加了一个事件处理程序，但它没有按预期工作。

我希望单击 select2 ddl，选择一个选项，然后按 Tab 键或单击某处并隐藏带有 select2 的 div(这是当 $scope.view.editorEnabled 设置为 false 时应该发生的情况)。

实际发生的情况是，从 ddl 中选择一个元素然后按 Tab 键或单击其他地方后，带有 select2 ddl 的 div 没有被隐藏。如果我第二次从 select2 ddl 中选择一个元素，那么带有 select2 ddl 的 div 将被隐藏，并显示带有所选值的 div。

我可以看到每次都会调用 select2-blur 事件(通过设置断点)，但 div 不会立即更新。 . .仅当运行两次时。

我真的不想将 select2-blur 事件附加到 $element(即 TD)，但我不知道该怎么做。我试图将事件附加到我发现的各种其他元素(.select2-choice、.select2-container)，但我什至无法触发事件。

此时已经过去几个小时了，我想我可以使用一双新的眼睛。这可能很简单，但我没有看到。

谢谢!

Answer 1

这里是一个非常简单的 $scope.$apply() :

      //select2 has its own blur event !
      $element.on('select2-blur', function(event) {
          $scope.save();
          $scope.$apply();
      });

就是答案。我想这与事件回调中更改的 $scope 值有关？