指令模板未在模式输入上呈现

Directive template not rendering on modal input

本文关键字:输入 模式 指令      更新时间:2023-09-26

我有一个角度引导模式,我为其创建了一个自定义指令,以便输入字段将在打开时自动聚焦。我已经将指令模板添加到我的输入标签中,但在检查元素上,它无处可见。法典:

指令(复制自:如何在输入字段上设置焦点?

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

您需要以某种方式在代码中创建模态并触发它以显示。您刚刚定义了模板,现在您必须使用它。请参阅 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());
    });
  };
});

使用 templateUrl 属性链接到模式模板,并创建一个触发器以从 UI 调用open(例如:<span ng-click="open()">Open Modal</span> )。