Angularjs directive blocking ngModel

Asked

Viewed 96 times

2

In an angular application, I designed a small system of tabs and in this system I implemented a directive to create the events of onclick on each of the tabs. basically the project looked like this:

stylesheet.css

.-tabs{ width: 100%; display: block; margin: 0; padding: 0; }
.-tabs nav { width: auto; display: -ms-flexbox; display: flex; overflow: hidden; }
.-tabs nav div{ height: 42px; flex: 1; display: block; width: auto; float: left; }
.-tabs nav div.active label{ background:#dadada; }
.-tabs nav div label{ width: 100%; height: 42px; padding:0 10px; line-height: 42px; 
                      text-align: center; display: block; background: #d2d2d2; 
                      cursor: pointer; text-overflow:ellipsis; 
}
.-tabs nav section{ display: none; }

html

<div class="-tabs" minha-diretiva>
    <nav>
        <div class="active">
            <label>tab 1</label>
            <section>{{foo}}</section>
        </div>
        <div>
            <label>tab 2</label>
            <section>{{bar}}</section>
        </div>
    </nav>
    <div class="-tabmain"></div>
</div>

app js.

angular.module('app', [])
  .directive('minhaDiretiva', function(scope, element, attr, ctrl) {
    var el = element[0],
    mi = el.querySelectorAll('label');
    for(var i=0; i<mi.length;i++){
      mi[i].addEventListener('click',function(){            
        var a = this.parentNode,
            b = a.parentNode.querySelectorAll('div'),
            c = el.querySelector('.-tabmain');
        for (var i = 0; i < b.length; i++) {
          b[i].className = b[i].className.replace('  ', ' ');
          b[i].className = b[i].className.replace('active', ' ');
        };
        c.innerHTML = this.parentNode.querySelector('section').innerHTML;
        a.className = a.className.concat('active');
      },false);
      if( mi[i].parentNode.className.indexOf('active') > -1 ){
        el.querySelector('.-tabmain').innerHTML = mi[i].parentNode.querySelector('section').innerHTML;
      };
    };
  })
;

My problem is occurring when I update one of ngModel’s foo or bar through any function in my controller it seems that they are not updated, on the contrary, the angular cannot even read them in my code block and the block shown is still the ngModel mask. Has anyone ever seen such a mistake? there is something I can do in my directive so that after its processing I call the angular to identify these ngModel’s that are within the same?

angularjs angularjs-directives

  • Within the directive you will not be able to access these controllers, at least not from the jetio you are using, what you could do is use the concept of father - son, the right is daughter of the controller above, ie. to access the variables above, you could access $Scope. $Parent.foo or $Scope. $Parent.bar.

  • Speaks Leandro! To facilitate help, you could put the code involved in http:/jsfiddle.net/?

  • Got it @Renandegrandi, I was reading a little bit about $apply, there’s no way I can make it after the directive is instituted $digest or a $apply?

  • You can run the link function, it would look like this. Directive('myDirective', Function(Scope, element, attr, Ctrl) { Return ː link: Function (Scope, element, attrs){ ** what you run in here will already work in a APPLY cycle ** } }

1 answer

0

Instead of your code like this:

.directive('minhaDiretiva', function(scope, el, att, ctrl) {
    var el = element[0],

For this:

.directive('minhaDiretiva', function(scope, element, att, ctrl) {
    var el = element[0],

  • Irton, sorry, this correction already exists in my original code, to post here I ended up rewriting in a more "light" way so as not to get tired understanding

  • Reading again if the masks {{ foo }} and {{ bar }} are appearing, it seems that your angular app has not 'rotated' or given some syntax error in the code. It may also be that you need to compile this new html that your directive has created for this you need an extra $Compile service for the angular to identify your masks and run the template bindind with your model, $Compile is not required on a Function link but it costs no expense to check...

Browser other questions tagged angularjs angularjs-directives

You are not signed in. Login or sign up in order to post.