Wie URL in einem modalen starten?

Question

Ich versuche ein Modal zu starten, das eine URL enthält, wenn der Benutzer auf eine Schaltfläche klickt.

Ich habe so etwas wie diese:

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'; 
    .... 

ich die URL wollen, sobald die modal-Shows gestartet. Iframe-Ansatz funktioniert, aber ich frage mich, ob es elegantere Möglichkeiten gibt, dies zu tun. Danke für die Hilfe!

Answer 1

Je nachdem, was Sie hier erreichen möchten, wenn Sie nur einige HTML mit Ihren eigenen Stilen anzeigen möchten, können Sie die $ sce.trustAsHtml und ng-bind-html Direktive verwenden. Aber wenn Sie einige benutzerdefinierte Stile innerhalb und einige js wollen, dann Iframe ist wahrscheinlich eine sicherere Lösung.

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>

Sie können auch einige HTML injizieren und kompilieren. Wenn Sie möchten, dass sich Ihr HTML wie normale Winkelschablonen verhält.

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>

In jedem Beispiel, das ich Teil übersprungen zu holen, wie ich annehme wissen Sie, wie http $ verwenden.