Aradığın için teşekkürler. HTML güvenli hale getirmek için $sce 'ın trustAsHtml ile ng-bind-html istihdam,
Bir JSON nesnesi ng-click özelliklere sahip bir HTML bağlantıları vardır: Ben sağ dalış edeceğiz. Ben de bir $q söz içinde json yüklendikten sonra app açısal tıklama dinleyicisi derlemek için özel bir angular-compile yönergesini kullandım.
Tüm bu
ilk bakışta, gerektiği gibi çalışıyorsa ...JSON
{
"text" : "Sample of text with <a data-ng-click=\"__services._animation.openModal('g');\">modal trigger</a>?"
}
GÖRÜNÜM
<p data-ng-bind-html="__services.trustAsHTML(__data.steps[step.text])"
data-angular-compile></p>
DİREKTİFİ
angular.module('app.directives.AngularCompile', [], ["$compileProvider", function($compileProvider) {
$compileProvider.directive('angularCompile', ["$compile", function($compile) {
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
return scope.$eval(attrs.angularCompile);
},
function(value) {
element.html(value);
$compile(element.contents())(scope);
}
);
};
}])
}]);
Sayı:
Tamam, o zaman çalışır. Uygulamam yüklendi, güvenli HTML'yi sunuyor ve ng-click benim modüllerimi, paramizi geçerek açar. Oluşturulan html'de a etiketinde class='ng-binding' çevreleyen p etiketini, class="ng-scope" etiketini görüyorum. Yaşasın!
İşin sonraki amacıyla, başka görünümde trustAsHTML, angular-compile treatment ilerlemeyi izleyen bir başka modelde bu veriyi yazmak ve aynı ng-bind aracılığıyla çalıştırmaktır. Sadece verileri bir kardeş nesnesine kopyalamak.
İşte nerede başarısız! bağlama ve trustAsHTML Açısal uygulanır - Aynı sayfada aynı kapsam ($ rootScope) 'de bir kalıcı olan ikinci görüşe ise
<p data-ng-bind-html="__services.trustAsHTML(__state.modal.text)"
data-angular-compile></p>
. Ancak bağlantı tıklanabilir değildir ve a etiketinde class="ng-scope" oluşturulmaz.
Kurulumumun daha açık bir açıklaması, sorunu anlamaya yardımcı olabiliyorsa, burayı ayrıntılı olarak açıklamama izin verin. Tüm Uygulama ilk kapıcı tarafından kurulan ve $ rootScope en çok veriyi depolamak edilir: Ben kalıcı bunun kendi yönergede çünkü o olmadığını görmek için benim bütün siteyi üstlenmeden 2 gün geçirdim
return angular
.module('app', [
'ngResource',
'ngSanitize',
'ui.router',
'oslerApp.controllers.GuideController',
'oslerApp.services.ConciergeService',
'oslerApp.services.DataService',
'oslerApp.services.LocationService',
'oslerApp.services.StatesService',
'oslerApp.directives.AngularCompile',
])
.config(function($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to landing
$urlRouterProvider.otherwise("/");
// Now set up the states
$stateProvider
.state('guide', {
url: "/guide",
templateUrl: "views/guide.html",
controller: 'GuideController as guide'
})
.state('contact', {
url: "/contact",
templateUrl: "views/contact.html"
})
})
.run(function(ConciergeService) {
ConciergeService.init();
});
ama Onu aynı şablon ve kapsam içine koymak, bana burada yardımcı olmadı.