Angular js - Bindung an Funktion

Question

I Funktion haben Bindung, die so ähnlich aussieht:

function func() { 
    this.scopeVar = { 
     bla: this.isolateScopeVar.bla, 
     gla: this.isolateScopeVar.gla 
    } 
} 

ich diesen HTML-Code haben:

<span>{{this.scopeVar.bla}}</span> 
<span>{{this.scopeVar.gla}}</span> 

Mein Problem ist, dass, wenn die this.isolateScopeVar.bla oder this.isolateScopeVar.gla hat geändert span würde nicht ohne einen Trigger von func aktualisiert werden.

kann ich diese Methode verwenden, die funktioniert:

function func() { 
    return { 
     bla: this.isolateScopeVar.bla, 
     gla: this.isolateScopeVar.gla 
    } 
} 

<span>{{this.func().bla}}</span> 
<span>{{this.func().gla}}</span> 

Aber ich denke, dass dies nicht der beste Weg, es zu tun ist.

Es gibt andere Möglichkeiten, das richtig zu tun?

Answer 1

Beginnen wir mit, ich hoffe, Sie verwenden eine aktuelle Version auf eckig, vielleicht mit components, die isolierten Bereich haben.

Innerhalb der Vorlage können Sie mit $ctrl auf den Controller zugreifen.

<span>{{$ctrl.bla}}</span> 

wo bla in der Steuerung Deklaration definiert ist:

angular.module('whatever').controller('theNameController', { 
    bindings: { 
     bla: '<' // if you want this to be settable from who's using the component 
    }, 
    controller:() => { 
     bla = 42; // or declare it here if you want it be completely isolated 
    }, 
    require: { }, 
    templateUrl: 'myTemplate.html' 
} 

Answer 2

Es ist möglich. Hier ist Beispiel:

angular.module('app', []) 
.component('appComponent', { 
     template: [ 
     '<span>{{ $ctrl.getData().bla }}</span><br>', 
     '<span>{{ $ctrl.getData().gla }}</span>', 
     ].join(''), 

     controller: function() { 

     this.getData = function(){ 

      var isolateScopeVar = {} 
      isolateScopeVar.bla = 'my item bla' 
      isolateScopeVar.gla = 'my item gla' 

      return { 
       bla: isolateScopeVar.bla, 
       gla: isolateScopeVar.gla 
      } 
     } 
     } 
}); 

Live-Demo ist here