如何在编辑 UI 网格单元格时打开 AngularJS UI Bootstrap 弹出窗口

Question

以下代码片段使用名为

invalidnamesetter

的指令，当用户在 UI 网格单元格中键入单词

isInvalidName

时，引发

foo

标志。

正如预期的那样，当 UI 网格单元格中出现

<label>

一词时，HTML

isInvalidName = true

标记设置为

foo

，否则设置为

isInvalidName = false

。

但是，当

isInvalidName

标志升起时，UI Bootstrap 弹出窗口不会打开，尽管

popover-is-open

在 UI 网格单元模板中设置为

{{grid.appScope.isInvalidName}}

。

问题：

这是由 Angular UI Grid 或 Bootstrap 框架的限制引起的吗？
如果没有，应对截取的代码进行哪些更改，以便当用户在 UI 网格单元格中键入单词
```
foo
```
时打开 UI Bootstrap 弹出窗口？

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.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>'
      }
    ]
  };
});

<!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>

Answer 1

实际上不需要该指令，您可以直接在

popover-enable

中添加条件并将触发器设置为

mouseover

，然后无需任何逻辑，弹出窗口将根据

COL_FIELD

的值显示/隐藏。

下面的工作示例。

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

mod.controller('ctrl', function ($scope) {
  $scope.gridOptions = {
    data: [{name: ""}],
    columnDefs: [
      {
        field: 'Name',
        cellTemplate: '' +
          '  <div' +
          '      uib-popover="foo is not allowed" ' +
          '      popover-append-to-body = "true" ' +
          '      popover-trigger="\'mouseover\'"   popover-enable="COL_FIELD == \'foo\'" ' +
          '      class="form-control">' +
          '    {{COL_FIELD}}' +
          '  </div>'
      }
    ]
  };
});

<!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>

如何在编辑 UI 网格单元格时打开 AngularJS UI Bootstrap 弹出窗口

问题描述投票：0回答：1

1个回答

最新问题

如何在编辑 UI 网格单元格时打开 AngularJS UI Bootstrap 弹出窗口

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1