각도 JS는 같은 보이는 내가 함수로 바인딩 한 기능

Question

바인딩

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

는 :

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

것이 가능하다. 이 값을 얻을 수있는 기능으로 전달할 것입니다 왜

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