Question

我試圖讓我的頭部圍繞Angular 1組件。我寫了一個簡單的組件，它會在init中設置一個背景顏色，然後用按鈕單擊來改變顏色。

下面的代碼：

<shadow colour="black"></shadow> 

---

app.component('shadow', { 
    bindings: { 
     colour: '=' 
    }, 
    controller: function() { 
     function setColour(col) { 
      this.colour = col; 
     } 
    }, 
    scope: {}, 
    template: ['<div ', 
     'style="background: {{ shadow.colour }}; width: 100px; height: 100px;">', 
     '<button ng-click="shadow.setColour(red)">Button</button>', 
    '</div>'].join('') 
}); 

不幸的是，這是行不通的。根據我讀過的內容，當沒有傳遞controllerAs時，Angular會認爲組件名稱是控制器名稱。所以我嘗試着這樣寫。我哪裏做錯了？

Answer 1

如果沒有通過控制器，Angular會自動使用名稱'$ ctrl'。從角源：

controllerAs: identifierForController(options.controller) || options.controllerAs || '$ctrl', 

EDIT 1：

1. 此外，綁定應該是 '@' 而不是 '='。
2. 您從未將函數「setColour」設置爲控制器本身。

編輯2：

校正代碼將是這樣的：

app.component('shadow', { 
    bindings: { 
     colour: '@' 
    }, 
    controller: function() { 
     this.colourSecondary = 'red'; 

     this.setColour = setColour; 

     function setColour(colour) { 
      this.colour = colour; 
     } 
    }, 
    scope: {}, 
    template: ['<div ', 
     'style="background: {{ $ctrl.colour }}; width: 100px; height: 100px;">', 
     '<button ng-click="$ctrl.setColour($ctrl.colourSecondary);">Button</button>', 
     '</div>'].join('') 
}); 

綁定與 '@' 取字符串或內插變量例如{{color}}。

對於'='，角度需要一個範圍變量，其名稱'color'不存在。

Answer 2

我願意做它像這樣：

angular 
    .module('yourModule') 
    .directive('shadow', shadow); 

function shadow() { 
    return { 
     scope: { 
      colour: '=?' 
     }, 
     restrict: 'AE', 
     template: '<div style="background: {{colour}}; width: 100px; height: 100px;"></div>' 
    }; 
} 

在HTML：

<button ng-click="setColor('red')">Button</button> 
<shadow color="{{yourColor}}"></button> 

，並在你的主指令：

$scope.setColor = function(newColor){ 
    $scope.yourColor = newColor; 
}