CODEWITHSUNDEEP
angularjsangularjs-directive
angular_learner
angular_learner

Reputation: 671

Use angularjs directive attribute in controller

I know I shouldn't be using jQuery in combination with Angular, but this is just for the demonstration purposes.

I'm struggling with understanding as to how to inject/insert a directive's attribute inside the controller?

Code:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $('#myDiv1').html('<p>This works</p>');

  //this below doesn't work when injecting directive attribute
  $('#myDiv2').html('<p my-directive></p>');

})
.directive("myDirective", [function () {
        return {
        restrict: 'EAC',
        require: '?ngModel',
        link: function($scope, element, attrs, controller) {
          var controllerOptions, options;
          element.text('Hello There');
        }
      };
}]);

PLUNKR

Can anyone help please? Is there a way to achieve this?

Upvotes: 0

Views: 66

Answers (1)

dhavalcengg
dhavalcengg

Reputation: 4713

Change your code to following

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $compile) {

  $('#myDiv1').html('<p>This works</p>');

  //this below doesn't work when injecting directive attribute
  $('#myDiv2').html('<p my-directive></p>');
$compile($("#myDiv2"))($scope);

})
.directive("myDirective", [function () {
        return {
        restrict: 'EAC',
        require: '?ngModel',
        link: function($scope, element, attrs, controller) {
          var controllerOptions, options;
          element.text('Hello There');
        }
      };
}]);

Upvotes: 1

Related Questions