似乎無法得到AngularJS單向綁定工作

我最近使用（不那麼新的）組件中，一個古老的角度應用開始。我正在嘗試製作some dumb components以處理諸如<button/>之類的瑣事。似乎無法得到AngularJS單向綁定工作

出於某種原因，我似乎無法得到的一種方式綁定工作！

的level在difficultyButton組件綁定（在difficult-button.js）始終返回undefined，但onLevelChosen結合（再次，在difficulty-button.js）似乎有使options組件傳遞給它的回調。

做任何你看到我可能已經去錯了嗎？

這裏是一個jsbin鏈接演示這個問題：http://jsbin.com/rixukuh/11/edit?html,js

注意如何類red，和blue永遠不會應用，因爲他們可能永遠也趕不上的vm.level值的保持。

此外，在控制檯始終打印出來LEVEL => undefined，無論是點擊了哪些按鈕。

全碼

下面是完整的代碼，如果需要更多的上下文。

options.tpl.html

<div class="full-page-cover"> 
<div class="options-grid"> 
    <!-- some random markup --> 
    <div class="buttons-grid">  
     <difficulty-button 
      level="easy" 
      on-level-chosen="vm.chooseDifficulty(level)" > 
      I'm just here for having fun! 
     </difficulty-button> 
     <!-- some more `difficulty-buttons` --> 
    </div>      
    </div> 
</div>

options.js

import angular from 'angular'; 
import DifficultyButtonModule from './difficulty-button.js'; 
import template from './options.tpl.html'; 

class OptionsController { 
    constructor() { /* ... */ } 
    chooseDifficulty(level) { /* ... */ } 
} 

const OptionsModule = angular.module('options', [DifficultyButtonModule.name]) 

OptionsModule.component('options', { 
    template, 
    controller: OptionsController, 
    controllerAs: 'vm' 
}); 

export default OptionsModule;

difficulty-button.tpl.html

<button 
    ng-class="[ 
     'uk-button uk-button-large', 
     { 
     easy: 'uk-button-default', 
     medium: 'uk-button-primary', 
     hard: 'uk-button-danger' 
     } [ vm.level ] 
    ]" 
    ng-click="vm.onLevelChosen({ level: vm.level })" 
    ng-transclude> 

</button>

difficulty-button.js

import angular from 'angular'; 
import template from './difficulty-button.tpl.html'; 

const DifficultyButtonModule = angular.module('difficultyButton', []);          
DifficultyButtonModule.component('difficultyButton', { 
    template, 
    bindings: { 
    level: '<', 
    onLevelChosen: '&' 
    }, 
    controllerAs: 'vm', 
    transclude: true 
}); 

export default DiffButtonModule;

來源

2017-03-14 krishgopinath

你能提供一個小提琴嗎？ –

@貢薩洛 - 當然！讓我鞭打一個。 – krishgopinath

@ Gonzalo.-檢查我的編輯！我已經添加了一個jsbin文件 – krishgopinath

，當你做到這一點

level="easy"

你在你的範圍（如$scope.easy）對容易屬性的綁定。當然哪個不存在。如果您想直接從你的HTML綁定對字符串值，則需要使用單引號

level="'easy'"

與同爲其他級別。這將工作正常。

如果你仍然想使用針對對象綁定，則需要在其中創建它們的範圍。但由於您只需要一種方法，使用字符串應該可以正常工作

免責聲明：我沒有使用組件，因此可能是解釋不正確。我剛剛與angularjs

來源

2017-03-14 18:57:43

WHOA！那已經死了！現在工作。謝謝大家:) 這就是說，我一直認爲''controllerAs'語法允許通過我們提供的名稱訪問'$ scope'對象，在這種情況下，''vm「'。有可能在全球範圍內查看''easy''，也許？ – krishgopinath

似乎無法得到AngularJS單向綁定工作

回答

相關問題