编辑UI Grid单元格时如何触发AngularJS UI Bootstrap弹出框？

1. 是否由框架限制导致？ #

不是。这个问题并非Angular UI Grid或Bootstrap框架的限制，而是由模板语法错误和弹出框状态绑定方式不正确导致的。

2. 代码修改方案 #

核心问题分析 #

• 单元格模板中invalidnamesetter标签存在语法错误，未正确闭合开始标签。
• popover-is-open使用了插值语法{{}}，导致传递的是字符串值而非布尔值，无法触发弹出框的状态更新。

具体修改步骤 #

步骤1：修复单元格模板的语法错误

在invalidnamesetter标签的末尾添加>，确保标签正确闭合：
原代码片段：

'<invalidnamesetter ' +
'    colfield="COL_FIELD"' +
'    setinvalidnametotrue="grid.appScope.setInvalidNameToTrue()"' +
'    setinvalidnametofalse="grid.appScope.setInvalidNameToFalse()"' +
'  <div' +

修改后：

'<invalidnamesetter ' +
'    colfield="COL_FIELD"' +
'    setinvalidnametotrue="grid.appScope.setInvalidNameToTrue()"' +
'    setinvalidnametofalse="grid.appScope.setInvalidNameToFalse()"' +
'>' +
'  <div' +

步骤2：修正popover-is-open的绑定方式

移除插值语法{{}}，直接绑定到控制器作用域的布尔变量：
原代码：

'      popover-is-open="{{grid.appScope.isInvalidName}}" ' +

修改后：

'      popover-is-open="grid.appScope.isInvalidName" ' +

步骤3：初始化布尔变量（可选但推荐）

在控制器中初始化isInvalidName为false，避免初始状态为undefined：

mod.controller('ctrl', function ($scope) {
  $scope.isInvalidName = false; // 添加这行

  $scope.setInvalidNameToTrue = function() {
    $scope.isInvalidName =true;
  }

  // ... 其余代码不变
});

修改后的完整代码 #

JavaScript部分

var mod = angular.module('app', ['ngAnimate', 'ngSanitize', 'ui.bootstrap', 'ui.grid', 'ui.grid.edit']);

mod.directive('invalidnamesetter', function () {
  return {
    restrict: 'E',
    transclude: true,
    scope: {
      colfield: '=',
      setinvalidnametotrue: '&',
      setinvalidnametofalse: '&'
    },
    template: '<div ng-transclude></div>',
    link: function (scope) {
      scope.$watchGroup(['colfield'], function (values) {
        if(values[0] === 'foo') {
          scope.setinvalidnametotrue();
        } else {
          scope.setinvalidnametofalse();
        }
      });
    }
  }
});

mod.controller('ctrl', function ($scope) {
  $scope.isInvalidName = false;

  $scope.setInvalidNameToTrue = function() {
    $scope.isInvalidName =true;
  }

  $scope.setInvalidNameToFalse = function() {
    $scope.isInvalidName =false;
  }

  $scope.gridOptions = {
    data: [{name: ""}],
    columnDefs: [
      {
        field: 'Name',
        cellTemplate: '' +
          '<invalidnamesetter ' +
          '    colfield="COL_FIELD"' +
          '    setinvalidnametotrue="grid.appScope.setInvalidNameToTrue()"' +
          '    setinvalidnametofalse="grid.appScope.setInvalidNameToFalse()"' +
          '>' +
          '  <div' +
          '      uib-popover="foo is not allowed" ' +
          '      popover-append-to-body = "true" ' +
          '      popover-trigger="\'none\'" ' +
          '      popover-is-open="grid.appScope.isInvalidName" ' +
          '      class="form-control">' +
          '    {{COL_FIELD}}' +
          '  </div>' +
          '</invalidnamesetter>'
      }
    ]
  };
});

HTML部分（无需修改）

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-animate.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-sanitize.js"></script>

  <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
  <link rel="stylesheet"
        href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/4.4.5/ui-grid.min.js"></script>
  <link rel="stylesheet"
        href="https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/4.4.5/ui-grid.min.css"/>
</head>

<body ng-app="app">

<div ng-controller="ctrl">
  <label>isInvalidName = {{isInvalidName}}</label>
  <div ui-grid="gridOptions" ui-grid-edit></div>
</div>

</body>

</html>

修改说明 #

• 修正语法错误后，Angular能正确解析模板结构。
• 直接绑定布尔变量到popover-is-open，确保弹出框能实时响应isInvalidName的状态变化。
• 初始化变量可避免初始状态下的潜在问题。

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