角度模态与控制器作为语法

发布时间：2020-12-17 08:25:31 所属栏目：安全来源：网络整理

导读：我使用角度为-i-bootstrap-bower#0.7.0，角度#1.2.10，当打开控制器是“老式”的模态时，一切都正常。但是，当我有一个控制器意图使用新的“控制器作为语法”它不工作。 angular-ui-bootstrap modal是否与controller as syntax配合使用？ 0.7版支持吗？怎么

我使用角度为-i-bootstrap-bower#0.7.0，角度#1.2.10，当打开控制器是“老式”的模态时，一切都正常。

但是，当我有一个控制器意图使用新的“控制器作为语法”它不工作。 angular-ui-bootstrap modal是否与controller as syntax配合使用？ 0.7版支持吗？怎么做？

您可以使用ngController语法为“controller”选项。
例如：

controller: 'modalController as modal'

有一个sample plunker

来自plunker的代码：

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="angular.js@1.2.16" data-semver="1.2.16" src="https://code.angularjs.org/1.2.16/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="demoController as demo">
    <h1>{{ demo.message }}</h1>

    <button class="btn btn-primary" ng-click="demo.modal()">Open modal</button>

    <script type="text/ng-template" id="modal.html">
      <div class="modal-header">
        <h3 class="modal-title">Modal window</h3>
      </div>
      <div class="modal-body">
        <pre>{{ modal.modalText }}</pre>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" ng-click="modal.cancel()">Cancel</button>
      </div>
    </script>

  </body>

</html>

script.js

angular.module('app',['ui.bootstrap'])
.controller('demoController',function($modal) {
  this.message = 'It works!'
  this.modal = function() {
    $modal.open({
      controller: 'modalController as modal',templateUrl: 'modal.html'
    });
  };
})
.controller('modalController',function($modalInstance) {
  this.modalText = 'Modal Text'
  this.cancel = function() {
    $modalInstance.dismiss();
  }
})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!