Angular 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更改了，則在沒有任何func觸發的情況下， span將不會更新。

我可以使用這種方法將工作：

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

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

但是我認為這不是最好的方法。

還有其他正確方法嗎？

Answer 1

讓我們開始吧，我希望您使用的是angular的最新版本，也許是帶有隔離范圍的components 。

在模板中，您可以使用$ctrl訪問控制器。

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

其中bla在控制器聲明中定義：

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

現場演示在這里