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会自动使用名称＆＃39; $ ctrl＆＃39;如果没有通过controllerAs。来自角度来源：

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

编辑1：

此外，绑定应该是＆＃39; @＆＃39;而不是＆＃39; =＆＃39;。
您从未设置过功能＆＃34; setColour＆＃34;到控制器本身。

编辑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('')
});

绑定＆＃39; @＆＃39;采用字符串或插值变量，例如{{color}}。

使用＆＃39; =＆＃39;，angular需要一个名为＆＃39; color＆＃39;的范围变量。这不存在。

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

角度组件访问其控制器

2 个答案: