0

入力フィールドが開いたときにオートフォーカスするように、カスタム ディレクティブを作成した angular-bootstrap モーダルがあります。ディレクティブ テンプレートを入力タグに追加しましたが、検査要素ではどこにも表示されません。コード：

ディレクティブ (からコピー: How to set focus on input field? )

'use strict';

angular.module('portfolioManager.directives', []).directive('focusMe', function($timeout, $parse) {
  return {
    //scope: true,   // optionally create a child scope
    link: function(scope, element, attrs) {
      var model = $parse(attrs.focusMe);
      scope.$watch(model, function(value) {
        console.log('value=',value);
        if(value === true) { 
          $timeout(function() {
            element[0].focus(); 
          });
        }
      });
      // to address @blesh's comment, set attribute value to 'false'
      // on blur event:
      element.bind('blur', function() {
         console.log('blur');
         scope.$apply(model.assign(scope, false));
      });
    }
  };
});

HTML:

    <div class='panel-heading report'>
        <h1 class='port-title port-manager-header title custom-inline'>Portfolios</h1>
        <div ng-controller="ModalCtrl" class='create-new-frame'>
            <script type="text/ng-template" id="myModalContent.html">
                <div class="modal-header">
                    <h3 class="modal-title">New Portfolio</h3>
                </div>
                <form name='eventForm'>
                    <div class="modal-body">
                        <input class='form-control' ng-model='portfolios.portName' placeholder='Portfolio name' ng-required='true' maxlength="35" focus-me="shouldBeOpen">
                        <span class="help-inline" ng-show="notUnique">Portfolio name already used</span>
                        <br>
                        <div ng-init="radioModel = 'Right'; portfolios.groupSelection = false" class="btn-group">
                            <label class="btn btn-primary" ng-model="radioModel" ng-click='portfolios.groupSelection = true' btn-radio="'Left'">Group</label>
                            <label class="btn btn-primary" ng-model="radioModel" ng-click='portfolios.groupSelection = false' btn-radio="'Right'">Private</label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" ng-click="ok(portfolios.portName)" ng-disabled="eventForm.$invalid || notUnique" id='portfolio-modal-create-button'>Create</button>
                        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
                    </div>
                </form>
            </script>
            <button class="btn btn-sm btn-primary create-new-frame-btn" ng-click="open('sm')">Create New</button>
        </div>
    </div>

モーダルコントロール:

'use strict';


angular.module('portfolioManager').controller('ModalCtrl', function ($scope, $modal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.open = function (size) {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
});
4

1 に答える 1

0

コードで何らかの方法でモーダルを作成し、表示するようにトリガーする必要があります。テンプレートを定義したので、それを使用する必要があります。http://angular-ui.github.io/bootstrap/#/modalを参照してください

ドキュメントの例:

angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.open = function (size) {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
});

opentemplateUrl 属性を使用してモーダル テンプレートにリンクし、UIから呼び出すトリガーを作成します(例: <span ng-click="open()">Open Modal</span>)。

于 2014-12-11T00:35:56.280 に答える