Question

我正在尝试在用户点击按钮时启动一个包含网址的模式。

我有类似的东西：

myModal.html:

<div class="modal-header">
    Title 1
</div>
<div class="modal-body">
  <iframe id="iframe" ng-src="{{my_url}}">
</div>

In JS:

$scope.clickButton = function(){
    var modal = $uibModal.open({
        templateUrl: 'myModal.html'
        controller: 'myCtrl',         
    });
})

In myCtrl:

  ....
  $scope.my_url = 'http://myotherproject/project/index.html';
  ....

我想在模态显示后立即启动网址。 iframe方法有效，但我想知道是否有更优雅的方法来做到这一点。谢谢你的帮助！

Answer 1

根据你想在这里实现的目标，如果你只是想用你自己的样式显示一些html，那么你可以使用$ sce.trustAsHtml和ng-bind-html指令。但是如果你想要一些自定义样式和一些js，那么iframe可能是更安全的解决方案。

angular.module('app', []);

angular
  .module('app')
  .controller('Example', function ($sce) {
    const someHTML = `
      <strong>blah</strong><br>
      <hr>
      <h1>Blah</h1>
    `;
  
    this.someHTML = $sce.trustAsHtml(someHTML);
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<div ng-app="app" ng-controller="Example as Example">
  <div ng-bind-html="Example.someHTML"></div>
</div>

你也可以注入一些html并编译它。如果你希望你的html表现得像常规的角度模板。

angular.module('app', []);

angular.module('app').directive('compile', ($compile) => {
  return {
    restrict: 'A',
    link: (scope, element, attrs) => {
      attrs.$observe('compile', (html) => {
        const content = $compile(html)(scope);
        
        element.empty();
        element.append(content);
      });
    }
  };
});

angular.module('app').controller('Example', function () {
  this.x = 0;
  this.someHTML = `
    <div>
      {{Example.x}}<br>
      <button type="button" ng-click="Example.x = Example.x + 1">+1</button>
    </div>
  `;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<div ng-app="app" ng-controller="Example as Example">
  <div compile="{{Example.someHTML}}"></div>
</div>

在所有示例中，我跳过了抓取部分，因为我假设您知道如何使用$ http。

如何在模态中启动网址？

1 个答案: