Angular js - simple controller - view - modal

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

Jeremy Likness · Accepted Answer · 2014-01-22 13:36:36Z

1

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.

answered Jan 22, 2014 at 13:36

Jeremy Likness

7,5311 gold badge25 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Filippo oretti Over a year ago

yeah but how to inject different html src into modal and toggle the modal (hide/show) ? :(

Jeremy Likness Over a year ago

Have you looked into angular.ui? They provide a dialog service I believe ... you can also use any third-party like jQuery, etc.

Filippo oretti Over a year ago

no i just use anglar + js nothing else actually i want to stay lightweight :D

Jeremy Likness Over a year ago

I understand being lightweight. Maybe look at github.com/btford/angular-modal for inspiration - otherwise it seems a directive or at least a service is in order.

Filippo oretti Over a year ago

man can't you make a live example of what you are talking about, i just trying understanding how it may look the code but it's difficult, anyway thank you a lot

Collectives™ on Stack Overflow

Angular js - simple controller - view - modal

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related