2014-01-22 7 views
0

이, 내 간단한 코드 모달을 여는 노력하고 컨트롤러와 뷰를 통해 내부 데이터를 넣어 열 때, 실제로는 여전히 모달 내부 "{{ i }}"를 인쇄하고있어입니다 모달각도 JS - 간단한 컨트롤러 -보기 -

HTML

<body ng-controller="AppController"> 
    <div id="modal"> 
    <div id="modal-content"></div> 
    </div> 
    <button class="btn btn-option" onclick="modal({src:'views/layout/modals/modal.html'});"> 
    open 
    </button> 
    </body> 

modal.html :

<div ng-repeat="i in config.app_genres.genres"> 
    {{ i }} 
</div> 

app.js :

.controller('AppController', function($scope,$location,$http) { 
    $scope.config = {}; 
    $scope.config.app_ws = "http://localhost/And/www/"; 
    $scope.config.app_name = "Appname"; 
    $scope.config.app_short_description = $scope.config.app_name+" helps you go out with your rabbit"; 
$scope.config.app_motto = "hey ohhhhhhhhhh <i class='icon-check'></i>"; 
$scope.config.app_url = $location.url(); 
$scope.config.app_path = $location.path(); 
$http.get($scope.config.app_ws+'jsons/json.json').success(function(response) { 
$scope.config.app_genres = response; 
}); 

모달() JS 기능 :

function modal(_options){ 
/* 
options = { 
html:html to load, 
src: false | url  
} 
*/ 
var modal = document.getElementById('modal'), 
modal_content = document.getElementById('modal-content'); 

if(_options){ 

if(_options.html){ 
modal_content.innerHTML = _options.html; 
show(modal); 
} 
if(_options.src){ 
_load(_options.src,modal_content) ; 
show(modal); 

} 

}else{ 
console.log('Please set modal options'); 
} 
} 

답변

1

직접 모달 함수를 호출, 사용자의 범위에 대한 방법이라고 모달을 만들고 ngClick를 사용하여 바인딩 대신에.

Modal은 DOM을 조작하기 때문에 실제로 지시어 여야합니다.하지만 요약하면 HTML이 컴파일되지 않기 때문에 {{i}} 문제를 보지 못하는 이유가 있습니다. Angular는 알고있는 HTML을 컴파일하지만이 예제에서는 Angular 외부에 새로운 HTML 블록을 만들었습니다. 그 일을해야하지만 대신 모달위한 지침을 만드는 고려하면

// create a scope from the modal that inherits from the parent scope because it accesses properties there 
var modalScope = $scope.new(); 

// be sure to inject the compiler service: function($scope,$location,$http,$compile) 
var element = angular.element(modal_content); 
$compile(element.contents())(modalScope); 

, 그것은 더 나은 것 :

컨트롤러에서

, 당신은 그것을 구축하고,이 같은 작업을 수행 할 방법을 만들 수 .

+0

네,하지만 모달에 다른 HTML src를 삽입하고 모달을 전환 (숨기기/표시)하는 방법은 무엇입니까? : – sbaaaang

+0

angular.ui을 들여다 보았습니까? 내가 믿는 대화 서비스를 제공합니다. jQuery와 같은 제 3 자도 사용할 수 있습니다. –

+0

아니요. 단지 anglar + js를 사용합니다. 실제로는 아무것도 사용하지 않습니다. : D – sbaaaang

관련 문제