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

Question

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

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

ModalCtrl：

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

Answer 1

您需要在代码中以某种方式创建模态，并触发它以显示。您刚刚定义了模板，现在您必须使用它。见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（例如:open modal)。