지시어 템플릿이 모달 입력에 렌더링되지 않습니다.

Question

입력 필드가 열린 상태에서 자동 초점되도록 맞춤 지시문을 작성한 앵글 부트 스트랩 모달을 사용하고 있습니다. 입력 템플릿에 지시어 템플릿을 추가했지만 inspect 요소에서는 아무 것도 볼 수 없습니다. 코드 :

지침 (기술 : 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()); 
    }); 
    }; 
}); 

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이 모달 템플릿에 연결하고 (: <span ng-click="open()">Open Modal</span> 예를 들어)이 UI에서 open를 호출하는 트리거를 생성하는 속성을 사용합니다.