Angularjs controller in PartialView not working

Question

I have a view containing a link to call PartialView.

<div data-ng-controller="MainController"> <a href="#" data-ng-click=callPartialView()"> Click here to see the details. </a> </div> <script> app.controller('MainController', ['$scope', 'HttpService', function($scope, HttpService) { $scope.callPartialView = function() { HttpService.getModal('/Controller/ShowModalMethod', {}); }; }]); </script> 

My HttpService service has a function that calls an action from the controller and returns a PartialView to show it.

 getModal = function(url, params) { $http.get(url, params).then(function(result) { $('.modal').html(result); }); } 

PartialView shows great. The problem occurs when I try to add a controller to this PartialView content.

 <div class="wrapper" data-ng-controller="PartialViewController"> <span data-ng-bind="description"></span> </div> <script> alert('This alert is shown.'); app.controller('PartialViewController', ['$scope', 'HttpService', function($scope, HttpService) { $scope.description = "That the content must have to appear in that bind above, but it isn't working properly."; }]); </script> 

The controller simply does not work properly. Not. I put inside the controller in this div. What's happening? Thanks everyone!

Answer 1

Stop using jQuery ...

The problem is that $('.modal').html(result); Adds HTML only to the .modal class. What you need to do is compile the template using AngularJS, for example:

 app.factory('HttpService', function($document, $compile, $rootScope, $templateCache, $http) { var body = $document.find('body'); return { getModal: function (url, data) { // A new scope for the modal using the passed data var scope = $rootScope.$new(); angular.extend(scope, data); // Caching the template for future calls var template = $http.get(url, {cache: $templateCache}) .then(function (response) { // Wrapping the template with some extra markup var modal = angular.element([ '<div class="modal">', '<div class="bg"></div>', '<div class="win">', '<a href="#" class="icon cross"></a>', '<div>' + response.data + '</div>', '</div>', '</div>' ].join('')); // The important part $compile(modal)(scope); // Adding the modal to the body body.append(modal); // A close method scope.close = function () { modal.remove(); scope.destroy(); }; }); } }; }); 

Working example

http://jsfiddle.net/coma/6j66U/