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