Question

我是Angular JS的新手。我今天开始学习Angular JS。在我使用jQuery和Bootstrap作为前端之前。现在我想使用AngularJS显示Bootstrap对话框。我发现了这个，https://angular-ui.github.io/bootstrap/。

但初学者难以理解的事情很多。如何更正我的代码以显示引导对话框？

这是我的代码

   <html>
<head>
  <title>Angular</title>
  <link rel="stylesheet" href="http://localhost:8888/angular/bootstrap.css"></link>
  <script src="http://localhost:8888/angular/angular-js.min.js"></script>
  <script src="http://localhost:8888/angular/angular-js.animate.min.js"></script>
  <script src="http://localhost:8888/angular/angular-js.sanitize.min.js"></script>
  <script src="http://localhost:8888/angular/ui-bootstrap-tpls.min.js"></script>

</head>
<body>
  <div ng-controller="ModalDemoCtrl as $ctrl">
      <script type="text/ng-template" id="myModalContent.html">
          <div class="modal-header">
              <h3 class="modal-title" id="modal-title">I'm a modal!</h3>
          </div>
          <div class="modal-body" id="modal-body">
              <ul>
                  <li ng-repeat="item in $ctrl.items">
                      <a href="#" ng-click="$event.preventDefault(); $ctrl.selected.item = item">{{ item }}</a>
                  </li>
              </ul>
              Selected: <b>{{ $ctrl.selected.item }}</b>
          </div>
          <div class="modal-footer">
              <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button>
              <button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
          </div>
      </script>

      <button type="button" class="btn btn-default" ng-click="$ctrl.open()">Open me!</button>
      <button type="button" class="btn btn-default" ng-click="$ctrl.open('lg')">Large modal</button>
      <button type="button" class="btn btn-default" ng-click="$ctrl.open('sm')">Small modal</button>
      <button type="button" class="btn btn-default" ng-click="$ctrl.toggleAnimation()">Toggle Animation ({{ $ctrl.animationsEnabled }})</button>
      <button type="button" class="btn btn-default" ng-click="$ctrl.openComponentModal()">Open a component modal!</button>
      <div ng-show="$ctrl.selected">Selection from a modal: {{ $ctrl.selected }}</div>
  </div>
</body>
<script>
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($uibModal, $log) {
  var $ctrl = this;
  $ctrl.items = ['item1', 'item2', 'item3'];

  $ctrl.animationsEnabled = true;

  $ctrl.open = function (size) {
    var modalInstance = $uibModal.open({
      animation: $ctrl.animationsEnabled,
      ariaLabelledBy: 'modal-title',
      ariaDescribedBy: 'modal-body',
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      controllerAs: '$ctrl',
      size: size,
      resolve: {
        items: function () {
          return $ctrl.items;
        }
      }
    });

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

  $ctrl.openComponentModal = function () {
    var modalInstance = $uibModal.open({
      animation: $ctrl.animationsEnabled,
      component: 'modalComponent',
      resolve: {
        items: function () {
          return $ctrl.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $ctrl.selected = selectedItem;
    }, function () {
      $log.info('modal-component dismissed at: ' + new Date());
    });
  };

  $ctrl.toggleAnimation = function () {
    $ctrl.animationsEnabled = !$ctrl.animationsEnabled;
  };
});

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

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($uibModalInstance, items) {
  var $ctrl = this;
  $ctrl.items = items;
  $ctrl.selected = {
    item: $ctrl.items[0]
  };

  $ctrl.ok = function () {
    $uibModalInstance.close($ctrl.selected.item);
  };

  $ctrl.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  };
});

// Please note that the close and dismiss bindings are from $uibModalInstance.

angular.module('ui.bootstrap.demo').component('modalComponent', {
  templateUrl: 'myModalContent.html',
  bindings: {
    resolve: '<',
    close: '&',
    dismiss: '&'
  },
  controller: function () {
    var $ctrl = this;

    $ctrl.$onInit = function () {
      $ctrl.items = $ctrl.resolve.items;
      $ctrl.selected = {
        item: $ctrl.items[0]
      };
    };

    $ctrl.ok = function () {
      $ctrl.close({$value: $ctrl.selected.item});
    };

    $ctrl.cancel = function () {
      $ctrl.dismiss({$value: 'cancel'});
    };
  }
});
</script>
</html>

但是我的代码无效。有太多的选项我不知道在这例如“myModalContent.html”是从哪里来的？您会一步一步地解释在AngularJS中显示Bootstrap对话框吗？

我也尝试过这种方式

<html>
<head>
  <title>Angular</title>
  <script src="angular-js.min.js"></script>
  <script src="angular-js.animate.min.js"></script>
  <script src="angular-js.sanitize.min.js"></script>
  <script src="angular-js.touch.min.js"></script>
  <script src="bootstrap.ui.js"></script>
  <link href="bootstrap.css" rel="stylesheet">

</head>
<body ng-app="MyApp" ng-controller="MyCtrl">

  <button class="btn" ng-click="open()">Open Modal</button>

  <div modal="showModal" close="cancel()">
    <div class="modal-header">
      <h4>Modal Dialog</h4>
    </div>
    <div class="modal-body">
      <p>Example paragraph with some text.</p>
    </div>
  </div>

</body>
<script>
var app = angular.module("MyApp",["ui.bootstrap.modal"]);

app.controller('MyCtrl',function($scope){
  $scope.open = function() {
    $scope.showModal = true;
  };
})
</script>
</html>

它显示如下：

它不能正常工作。如何在AngularJS中显示引导程序对话框？

Answer 1

你没有ctrl.open功能，尽管你在ng-click中引用了一个。

也许你可以试试这个？

li:hover:before {
  //do my border-bottom stuff
}
li:hover .rtsLink:before {
  //do my arrow stuff
}
li:hover .rtsLink:after {
  //do my arrow stuff
}

Answer 2

open()方法返回一个模态实例。这就是在模板上实际创建模态的内容。

templateurl是模板的路径。在这里，它在与控制器代码相同的路径中查找myModalContent.html。您需要创建和设计模板，并在视图中调用此模态时加载该模板。

如果您没有足够的HTML，则可以在此处使用

template代替templateurl内联HTML。＆＃34;足够＆＃34;对你的理解是主观的。

controller是控制器的名称。您可以根据需要定义它。

controllerAs是控制器的别名。您也可以将其定义为您喜欢的。默认情况下，$ctrl是控制器的别名。如果从此处删除controllerAs选项，您仍然可以在模板中使用$ ctrl。虽然，使用此功能需要您提供controller选项。

animationsenabled是一个布尔值，可用于通过切换animation属性来切换视图中的模态动画。默认值为false。

resolve有助于在已打开的模式上创建$resolve对象。这有助于提供items中所有已解析的值。它基本上是Angular $routeprovider服务的配置。为了更好地了解$resolve，您可以查看this

由于你是Angular的新手，和我一样，一个很好的起点是理解Angular中的Services。它将成为您最常用的功能之一。

此外，您可以查看上述代码的plunker，进行编辑并了解其功能。我昨天也第一次尝试了。

另外，将angular-ui添加为您问题的标记，以便角色ui人员可以参与其中。

希望这在某种程度上有所帮助。

Angular js中的Bootstrap对话框

2 个答案: