Angularjs 角度UI引导模式和文本框

我试图在angular ui引导模式组件上放置一个文本框

为了演示，我将使用项目列表的示例更改为文本框

有人能告诉我我做错了什么吗

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
              <input type="text" ng-model="username" placeholder="Username">
        </div>


        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <button class="btn btn-default" ng-click="open()">Open me!</button>
    <button class="btn btn-default" ng-click="open('lg')">Large modal</button>
    <button class="btn btn-default" ng-click="open('sm')">Small modal</button>
    <div >Username: {{ username }}</div>
</div>

---

这是一个范围问题。现在，您需要在ngModel表达式中使用著名的点：

我们将在0.12.0中对人进行更简单的操作，请参见

var ModalDemoCtrl = function ($scope, $modal, $log) {

  $scope.username ='';

  $scope.open = function (size) {

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

      }
    });

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

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

var ModalInstanceCtrl = function ($scope, $modalInstance) {

  $scope.username = 'A';

  $scope.ok = function () {
    $modalInstance.close($scope.username);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel','');
  };
};