2017-07-16 65 views
0

我使用的是角1.5組件來構建結構如下:更新角兒1.5組件不工作

<parent> 
    <child active="model.active"> 
    <child active="model.active"> 
    <child active="model.active"> 
</parent> 

我的組件:

(function() { 
'use strict' 
angular.module('module').component('child', 
    { 
     templateUrl: 'template.html', 
     bindings: { 
      active: '<' 
     }, 
     controllerAs: 'model', 
     controller: function() { 

      var model = this; 

      model.select = function() { 
       model.deselectAllChildren()(model); 
       model.active = true; 
      }; 
     } 
    }); 
})(); 

家長deselectAllChildren方法:

model.deselectAllChildren = function(tabModel) { 
    model.active = false; 
}; 

當用戶選擇其中一個子組件時,我希望它被激活並且其他孩子不能使用略去。所以邏輯使得所有的孩子都不活動(清理以前的選擇),然後使選定的孩子活動。父母的model.active屬性默認爲false。這適用於第一次選擇,但後續選擇不起作用,因爲model.active = false更改沒有傳播到子組件(因爲父級的model.active值仍然是false - 但某些子級model.active等於true這無疑是一個範圍/約束力的問題,我覺得我需要強制推model.active = false到所有兒童的任何想法

回答

0

如何:?

<parent> 
    <child active="model.active === 0" on-select="model.active=0"> 
    <child active="model.active === 1" on-select="model.active=1"> 
    <child active="model.active === 2" on-select="model.active=2"> 
</parent> 
angular.module('module').component('child', 
{ 
    templateUrl: 'template.html', 
    bindings: { 
     active: '<', 
     onSelect: '&' 
    }, 
    controllerAs: 'model', 
    controller: function() { 

     var model = this; 

     model.select = function() { 
      model.onSelect(); 
     }; 
    } 
});