角度JS -

Question

を機能させるバインディング私はそのような何かに見える機能に結合している：

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

私は、このHTMLコードを持っている：

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

私の問題はthis.isolateScopeVar.blaまたはthis.isolateScopeVar.glaがある場合ということですspanはfuncというトリガーなしで更新されませんでした。

私は動作します。この方法で使用することができます：

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

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

をしかし、私は、これはそれを行うための最善の方法ではないと思われます。

これを正しく行う方法は他にありますか？

Answer 1

はじめに、最新のバージョンを使用していることを願います。componentsで、隔離された範囲を持つ可能性があります。

テンプレート内では、$ctrlでコントローラにアクセスできます。 blaがコントローラ宣言内で定義されている

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

は：

Answer 2

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' 
} 

ことが可能です。ここでは一例です：あなたは、これらの値を取得するために機能によって通過するのはなぜ

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 
      } 
     } 
     } 
}); 

ライブデモがhere