These are chat archives for AngularClass/NG6-starter

7th
Feb 2016
Andrew Lombardi
@kinabalu
Feb 07 2016 00:08
@fesor trying to make the resolve stuff work, and ran into a slight issue:
        .state('accountsViewInfo', {
            url: '/accounts/info/:accountID',
            template: '<detail></detail>',
            resolve: {
                account: function($stateParams, accountService) {
                    "ngInject";
                    return accountService.getAccountById($stateParams.accountID);
                }
            }
        })

if I pass into the controller: account

    constructor($stateParams, $localStorage, accountService, account) {
        "ngInject";
        var self = this;
        this.accountService = accountService;

i get a can’t resolve provider error

Sergey Protko
@fesor
Feb 07 2016 00:11
resolved values available only on the same level as state definition. components doesn’t know anything about it. That’s why I pass data to scope and then pass it to component’s controller via bindings
and that’s wahy uiRouter suck at it)
Andrew Lombardi
@kinabalu
Feb 07 2016 00:14
@fesor could I trouble you for an example of bindings?
@fesor is that what you were doing in that example you pasted?
gah, nevermind I see it now
kinabalu @kinabalu is dense today
@kinabalu i think it is possible to make $stateChangeSuccess listener and update scope values from it… need to investigate this a little bit. Or just add PR to uiRouter
Andrew Lombardi
@kinabalu
Feb 07 2016 02:17
@fesor that all worked great btw, thank you. going to work it into the refactor tonight / tomorrw
Diogo Afonso Barroso
@icylabsDev
Feb 07 2016 13:14
hey guys I have a question. =) Can I use ng-include without $parent? ng-include creates a scope of its own. Can I pass in bindings?
Sergey Protko
@fesor
Feb 07 2016 13:14
@icylabsDev it isn’t isolated, so yes.
Diogo Afonso Barroso
@icylabsDev
Feb 07 2016 13:15
it isn't?
ok
i tought it was...
Sergey Protko
@fesor
Feb 07 2016 13:15
it just inherited from parent
Diogo Afonso Barroso
@icylabsDev
Feb 07 2016 13:16
ok, but then on the parent I don't need to do $parent?
Sergey Protko
@fesor
Feb 07 2016 13:16
@icylabsDev but consider just to not use ng-include, write your component instead. If you need to chose template dynamically, you can pass function as template or templateUrl value

ok, but then on the parent I don't need to do $parent?

You never need to do $parent

Diogo Afonso Barroso
@icylabsDev
Feb 07 2016 13:16
ok will have a look into that
thanks
but i need to load a bunch of templates dynamically. So you are saying make a template component and manipulate the template attribute?
Sergey Protko
@fesor
Feb 07 2016 13:19
.component(‘myComponent’, {
    templateUrl: function (el, attr) {
         if (attr.type === ‘one’) return ‘one-column-layout.html’;
         it(attr.type === ‘two’) return ‘two-column-layout.html’;
         returndefault-layout.html’;
    }
})
Diogo Afonso Barroso
@icylabsDev
Feb 07 2016 13:21
ok, I'm gonna try, I seem to uderstand
thanks
Diogo Afonso Barroso
@icylabsDev
Feb 07 2016 13:30
This message was deleted
This message was deleted
can this work? I'm getting an error that elis not defined
got it
Diogo Afonso Barroso
@icylabsDev
Feb 07 2016 14:01
hey @fesor I can it to work, but I have a problem if I try to do <exercise-template ng-if="false" template="{{vm.exercise.staticName}}"></exercise-template> I tries to render it, always.
even if the ng-if value is false
am i missing something?
i guess he is trying to run this before the ng-if
export function exerciseTemplateComponent(el,attr) {

  return {
    restrict: 'E',
    bindings: {
      template : '&'
    },
    templateUrl : function(el,attr) {
      console.log(attr.template);
      return `./app/templates/exercises/preview/${attr.template}.html`
    },
    controller,
    controllerAs: 'vm'
  }

}
  <exercise-template ng-if="false" template="{{vm.exercise.staticName}}"></exercise-template>
what can I do to fix this?
maybe check if template is valid? but does this code run only once? at the beginning?
Diogo Afonso Barroso
@icylabsDev
Feb 07 2016 14:21
anyone?
well ok, I found a hack for this...
can't say I'm proud
  templateUrl : function(el,attr) {
      console.log(attr.template);
      if(attr.template == '{{vm.exercise.staticName}}'){
        return `./app/templates/exercises/preview/default.html`
      }else{
        return `./app/templates/exercises/preview/${attr.template}.html`
      }
    },
Diogo Afonso Barroso
@icylabsDev
Feb 07 2016 18:48
that didnt work.
Sergey Protko
@fesor
Feb 07 2016 18:48
@icylabsDev what do you mean?
Diogo Afonso Barroso
@icylabsDev
Feb 07 2016 18:49
what I did there before
Sergey Protko
@fesor
Feb 07 2016 18:49
what exaclty goes wrong with this? empty attr.template value?
Diogo Afonso Barroso
@icylabsDev
Feb 07 2016 18:49
well I dont see any activity since 15:21
nop
I need to load the template dynamically several times.
And this is building the component immediately, resulting in a empty value {{vm.exercise.staticName}}
the only way I see it working is with the ng-include. which I understand it is not so pretty, but I need about 20 templates, and don't think that creating a component for them is also the best choice
? =)
Diogo Afonso Barroso
@icylabsDev
Feb 07 2016 20:05
what is the difference between .directive() and .component()
basicly it is simplified directives api to define components