Directive template not rendering on modal input

Question

I have an angular-bootstrap modal that I have created a custom directive for so that the input field will autofocus on open. I have added the directive template to my input tag, but on inspect element, it's nowhere to be seen. Code:

Directive (copied from: 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>

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

score 0 · Answer 1 · answered Dec 11 '14 at 00:35

0

You need to create the modal somehow in your code and trigger it to be displayed. You just defined the template, now you have to use it. See http://angular-ui.github.io/bootstrap/#/modal

Example from the docs:

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

Use the templateUrl attribute to link to your modal template and create a trigger to call open from the UI (for instance: <span ng-click="open()">Open Modal</span>).

answered Dec 11 '14 at 00:35

orange

7,755
14
75
139

I actually already had that code, and my modal opens and closes fine. It is triggered by the following line `` The issue seems to be in rendering the directive template within the modal script tags. – Daniel Bogart Dec 11 '14 at 00:44
Ok, I didn't see this part. I think your right. Can you try to extract the template into a separate file? – orange Dec 11 '14 at 00:50
What do you mean? If I put focus-me in a tag outside of the script tags, I can see it on inspect element, if that helps. – Daniel Bogart Dec 11 '14 at 00:52
I think I may need to define the path to the modal template within the directive using `templateUrl: 'myModalContent.html'` but I'm not sure where to put it. – Daniel Bogart Dec 11 '14 at 00:58
That's what I meant. You just extract the markup in your ` – orange Dec 11 '14 at 01:01
Can you post `ModalCtrl` which contains `open()`? – orange Dec 11 '14 at 01:02
I'm not sure if this ` – orange Dec 11 '14 at 01:11
Found out why the directive template (focus-me) wasn't showing up in on inspect html. I was editing the wrong partial...whoops. Now I can see the directive template in the html, but it's still not doing anything. – Daniel Bogart Dec 11 '14 at 01:15
Had to play with the variables and remove a line from the directive, and now it's working fine. Any idea why this line would cause errors: `scope.$apply(model.assign(scope, false));`? – Daniel Bogart Dec 11 '14 at 01:35
Depends on the error. What's happening? It could be that you're already in a digest cycle, so `scope.$apply()` would cause an error. – orange Dec 11 '14 at 03:31

Directive template not rendering on modal input

1 Answers1