0

I'm working on attaching html elements with directives from another directive. I've managed to successfully append the html elements with directives using this answer.

But, the values added to these elements through the directives don't change with the scope change. For example,

Controller Code: 

var DatepickerDemoCtrl = function ($scope) {
  $scope.el=2;
};

Directive link function

link: function link(scope,element, attrs) {
    element.attr('value', scope.el); //sets value to 2 as expected

    element.removeAttr("common-things");

    scope.el = 1 //Does not change value to 1

    $compile(element)(scope);

    //Even changing the scope variable after a timeout, the value remains 2
    $timeout(function(){
      scope.el = 4
    }, 2000); 
  }

A working plunker can be found here: http://plnkr.co/edit/S1t2PlwTX2aUiYZR04pF?p=preview

Running $compile after changing the value works, but it resets all values in the element(ex-Changing an attribute and running compile removes the current ng-value).

How can I bind the values to the scope from inside the directive?

Community
  • 1
  • 1
nipuna-g
  • 6,252
  • 3
  • 31
  • 48
  • There are a few ways to do this but the one I would start with would be passing your scope variable through as an isolated scope bound with the = attribute to the inner directive. – tuckerjt07 Feb 16 '16 at 07:04
  • @tuckerjt07 I tried passing the scope through the isolated scope and then triggering function after a timeout still doesn't change the value as expected. (http://plnkr.co/edit/BKIRcvGFbfWdcr26C0vm?p=preview) – nipuna-g Feb 16 '16 at 07:25

0 Answers0