angular code is not working inside the directive while adding it dynamically?

Question

I am adding Angular directive content dynamically, but I'm not able to add functionality like $scope and Controller inside it. How do I solve this issue? For example:

a.html

<div ng-controller="actrl">{{aname}}</div>

b.html

<div ng-controller="bctrl">{{bname}}</div>

Suppose that I have a directive with the template URL: /a.html and I change it to /b.html dynamically, then for b.html, the angular functionalities (bctrl) are not working.

jQuery

jQuery.ajax({
  url: menu.templateUrl,
  success: function(response) {                   
    jQuery("view-partial").html(response);                      
  }
});

Sarath Babu Nuthimadugu · Accepted Answer · 2015-10-01 13:27:55Z

1

Include content like this using ng-view

 $routeProvider
      .when('#/a.html', {
        templateUrl: 'b.html',
        controller: 'bctrl',

      });

Here is solution for your issue check the link http://jsbin.com/voyeki/2/edit

I am complied your code with

.controller("myCtrl",function($scope,$compile){
angular.element("view-partial").html($compile(response)($scope));
});

Hope this is solution for your issue :-)

edited Oct 1, 2015 at 13:27

answered May 6, 2015 at 10:14

Sarath Babu Nuthimadugu

8812 gold badges10 silver badges21 bronze badges

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

7 Comments

bagya Over a year ago

is there any other way? because if i switch to routing we have to change lot of coding.

Sarath Babu Nuthimadugu Over a year ago

peter.grman.at/dynamic-controllers-in-angularjs you need to manually create scope object. check the link hope helps for your requirement

bagya Over a year ago

It not possible to create fiddle . because many things depends on dynamic. can you please look at this code ...how can i bind instead using jQuery("view-partial").html($scope.data); -------------------------$http({ url: menu.templateUrl, method: "GET" }).success(function(data, status) { $scope.data = data; jQuery("view-partial").html($scope.data); }).error(function(data, status) { $scope.status = status; });

bagya Over a year ago

Thanks @sarath .Now it's working, controller code main js file. If the controller code in partial page it's not working. please help me to resolve this issue. example- <div ng-controller="Controller2"> <h1>Hello {{support.name}}</h1> </div> <script> bosAppModule.controller('Controller2', ['$scope', function($scope) { $scope.support = { name: 'bagya', address: 'bangalore' }; }]); </script>

Sarath Babu Nuthimadugu Over a year ago

Write controller2 script code in external js file or all controllers code in same page

|

Khalid · Accepted Answer · 2015-05-06 10:13:11Z

0

No need to use $scope on the view :

<div ng-controller="actrl">{{$scope.aname}}</div>

You need to use directly aname

<div ng-controller="actrl">{{aname}}</div>

answered May 6, 2015 at 10:13

Khalid

4,8285 gold badges29 silver badges50 bronze badges

2 Comments

bagya Over a year ago

HTML Code: <view-partial></view-partial> JS Code: jQuery.ajax({url: menu.templateUrl, success: function(response) { jQuery("view-partial").html(response); } });

Khalid Over a year ago

you need to take a look at angular routing, of course it will not work because angular isn't aware of the changes you made using jquery... I suggest you to use angular routing and don't use jquery for the logical aspect of your app.

bagya · Accepted Answer · 2015-05-06 10:25:57Z

0

HTML Code:
 <view-partial></view-partial>  
JS Code: 

jQuery.ajax({url: menu.templateUrl,
            success: function(response) {                   
            jQuery("view-partial").html(response);                      
                    }
        });

answered May 6, 2015 at 10:25

bagya

5110 bronze badges

Comments

bagya · Accepted Answer · 2015-05-07 06:13:12Z

Main.js for example

   <script>  

        var bosAppModule = angular.module("bosApp", []); 

        $http({
                 url: menu.templateUrl,
                  method: "GET"              
             }).success(function(data, status) {
              $scope.data = data;
             jQuery("view-partial").html($compile($scope.data)($scope));
                              }).error(function(data, status) {
                               $scope.status = status;
            });
        bosAppModule.controller('Controller2', ['$scope', function($scope) {
            $scope.support = {
              name: 'bagya',
              address: 'bangalore'
            };   
        }]);    
    </script>
Partial page
  <div  ng-controller="Controller2">
    <h1>Hello {{support.name}}</h1>
    </div>

Now it's working, if the controller code main js file. If the controller code in partial page it's not working. please look out below code and help me to resolve this issue.

example

<div  ng-controller="Controller2">
<h1>Hello {{support.name}}</h1>
</div>
<script>
bosAppModule.controller('Controller2', ['$scope', function($scope) {
    $scope.support = {
      name: 'bagya',
      address: 'bangalore'
    };   
}]);
</script>

Actually i need evey controller in that own partial page.

Collectives™ on Stack Overflow

angular code is not working inside the directive while adding it dynamically?

a.html

b.html

jQuery

4 Answers 4

7 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

a.html

b.html

jQuery

4 Answers 4

7 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related