CODEWITHSUNDEEP
javascriptjqueryangularjs
bagya
bagya

Reputation: 51

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

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

Upvotes: 0

Views: 96

Answers (4)

Sarath Babu Nuthimadugu
Sarath Babu Nuthimadugu

Reputation: 881

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 :-)

Upvotes: 1

bagya
bagya

Reputation: 51

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.

Upvotes: 0

bagya
bagya

Reputation: 51

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

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

Upvotes: 0

Khalid
Khalid

Reputation: 4808

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>

Upvotes: 0

Related Questions