Angular js - simple controller - view - modal

StackOverflow https://stackoverflow.com/questions/21284154

Question

this is my simple code , i'm trying opening a modal and when opened to put data inside via controller and view, but actually still only printing "{{ i }}" inside modal

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;
});

modal() js function:

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');
}
}
Was it helpful?

Solution

Instead of calling the modal function directly, create a method called modal on your scope and bind it using ngClick.

Modal should really be a directive because it manipulates the DOM, but in short the reason why you aren't seeing the {{i}} resolve is because the HTML is not compiled. Angular compiles HTML it knows about, but in this example you created a new block of HTML outside of Angular.

From the controller, you could create the method to build it up, and do something like this:

// 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);

Although that should work, it would be better if you considered creating a directive for the modal instead.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top