AngularJS 1.5 - 如何在組件上設置雙向綁定

Angular 1.X中的指令默認設置爲雙向綁定。組件默認情況下具有獨立的作用域。我有一個看起來視圖，如：AngularJS 1.5 - 如何在組件上設置雙向綁定

<div class="my-view"> 
    {{controllerVariable}} 
</div>

如果我有上述設置爲一個指令，該controllerVariable正確加載在以下情況：

<div ng-controller="myController"> 
    <my-view></my-view> 
</div>

但如果我把它設置爲使用以下組件：

myApp.component('myView', { 
    templateUrl: '/path/to/view', 
    bindings: '=' 
});

然後變量值不顯示。我曾嘗試將$ctrl添加到變量中：

<div class="my-view"> 
    {{$ctrl.controllerVariable}} 
</div>

但是這並不顯示該值。

我在這裏錯過了什麼？

來源

2016-11-11 Lloyd Banks

組件中不建議使用雙向綁定。組件被設計成一個緊湊的，可重用的元素，它是完全獨立的，這意味着它不依賴於周圍的HTML/JavaScript，也不會改變周圍的HTML/JavaScript。組件*可以**與其他應用程序元素進行通信，但它們不應該能夠被其他元素修改或修改。 – Claies

我必須明確指出，我想綁定變量：

myApp.component('myView', { 
    templateUrl: '/path/to/view', 
    bindings: { 
     controllerVariable: '@' 
    } 
});

而且，由於controllerVariable是一個字符串，我只好用@標誌結合。

來源

2016-11-15 17:04:50

您需要從該指令傳遞值到組件：

<my-view passed-var='ctrl.passedVar'></my-view>

，並在組件：

myApp.component('myView', { 
    templateUrl: '/path/to/view', 
    bindings: { 
     passedVar: '=' 
    }, 
    controller: function() { 
     var vm = this; 
     console.log(vm.passedVar); 
    } 
});

，那麼你就可以在組件訪問如示例

還有其他一些方法可以做到這一點，比如使用服務來處理信息或使用require來讓組件訪問控制器的方案五個。您可以在這裏找到上述方法和其他方法：https://docs.angularjs.org/guide/component。

來源

2016-11-11 21:25:17 Gordnfreeman

我在控制檯中得到一個'undefined'，這個 –

'在我的視圖中使用'passedVar'應該是'passed-var' –

是的，感謝您關注這一點，您也希望根據您的定義來適當地綁定ctrl.passedVar控制器（你可能只需要刪除ctrl並使用passedVar） – Gordnfreeman

AngularJS 1.5 - 如何在組件上設置雙向綁定

回答

相關問題