Angular.js: directive in scope always undefined

Question

EDIT: Forked @EliteOctagon plunker and weird it works! I can not understand why the code is below. http://plnkr.co/edit/y8uvulA9RHQ1Y9mwzin1

EDIT2: Hid the previous plunker and added $ timeout to the controller logic, and it stopped working! Guess that this is really the boot order. Check this out: http://plnkr.co/edit/ivmGQmEHTatNzBWhppyf

I'm new to angular and can't get my head wrapped around selection areas.

I need to create a directive to print <span/>on my page with information and an object in the view controller.

What I was trying to do was highlight the scope and pass the object through a two-sided attribute (see code below). However, when trying to access an object in a linkdirective function, it always appears as undefined.

What am I missing here?

Thanks in advance guys.

Using the directive in the html HTML template:

<party-starts party="party"></party-starts>

JS code directive

.directive('partyStarts', function(){
    return {
        restrict: 'E',
        template: '<div id="partyStart><i class="icon ion-pin"></i> </div>',
        scope: {
            party: '='
        },
        link: function(scope, el) {
            var party = scope.party;
            var icon = el.find('i');
            var statusStr = angular.element('<span/>');
            var final;

            console.log('scope '+scope);

            if(party.Diatodo){
                if(party.datahora.isSame(moment(), 'day') || party.datahora.isSame(moment().add(1, 'd'), 'day')){
                    icon.css({
                        'color': 'green'            
                    });
                    statusStr.text(' É hoje');
                    el.append(statusStr);
                }else{
                    icon.css({
                        'color': '#999'            
                    });
                    statusStr.text(' Começa em '+party.datahora.fromNow());
                    el.append(statusStr);
                }
                return;
            }

            if(party.datahora.unix() == party.datahoraf.unix()){
                final = party.datahora.clone().add(1, 'd').hour(6);
            }else{
                final = party.datahoraf;
            }

            if(party.datahora.twix(final).isCurrent()){
                icon.css({
                    'color': 'green'            
                });
                statusStr.text(' Começou há '+party.datahora.fromNow());
                el.append(statusStr);
            }else if(party.datahora.twix(final).isFuture()){
                icon.css({
                    'color': '#999'            
                });
                statusStr.text(' Começa em '+party.datahora.fromNow());
                el.append(statusStr);
            }else{
                icon.css({
                    'color': 'red'            
                });
                statusStr.text(' Já terminou');
                el.append(statusStr);
            }
        }
    };
})

Answer 1

Wrap the directive's scope variable in the observer and wait for it to initialize. In your case, you do not do this, so all your logic starts before the scope.party area is assigned.

link: function(scope, el) {

  var watcher = scope.$watch('party', function() {
    if(scope.party === undefined) return;

    // at this point it is defined, do work

    // delete watcher if appropriate
    watcher();
  })
}

Answer 2

, . , , , , . : http://plnkr.co/edit/Bsn3Vyjrmb311b8ykzU1 , , scope.party .

( "" ), .

, , Twitter, , . , : -)

Answer 3

, undefined, , . , , :

<my-products products='httpLoadedProducts'>/<my-products>

:

.directive('myProducts', function () {
  return {
    restrict: 'E',
    scope: {
      products: '=',
    },
    templateUrl: 'directives/products-template.html',
    link: function (scope, element, attrs) {
       console.log(scope.products);
    }
  }
})

HTTP-, , ​​ , console.log undefined.

. , link .

, ng-if, :

<div ng-if='httpLoadedProducts'>
   <my-products products='httpLoadedProducts'>/<my-products>
</div>

wbeange , .