Question

我仍然试图理解Angular中的绑定，并且我带来了强大的jQuery背景，所以也许我在这里完全错了，但我想创建一个component其他组件可以访问并能够调用其功能。

为此，我做了一个例子：

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

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

app.component('noise', {
    bindings: {
        name: '='
    },
    controllerAs: 'noise',
    controller: function() {
        this.name = 'Noise';
        this.music = music;

        function music() {
            alert('Merzbow');
        }
    },
    template: ['<div>{{ noise.name }}</div>'].join('')
});

如您所见，我创建了一个名为shadow的组件和一个名为noise的组件（双关语）。我现在想要的是从另一个指令访问一个指令。它们彼此无关。

Answer 1

如果要创建彼此通信的组件，则应创建服务，而不是指令。指令是主要用于部分html或用作html元素

的属性的组件

在所有情况下，它都不会满足你使用{指令或服务'inject一个到另一个，所以你可以调用注入的组件＆＃39;方法

<强>更新

如何以角度注入某物？使用角度依赖注入器！答对了！怎么注射？第一个变体（您在组件文件中指定依赖项）：

var component = function($scope) {
    // your component code here
};

component.$inject = ["$scope"]

第二个变体（您在注册组件中指定依赖关系）：

var component = function($scope) {
    // your component code here
};

angular.module("yourModule").component("componentName", ["$scope", component]);

如何使用服务操作DOM？看，如果你真的想要使用角度，你应该忘记jquery原则。不需要直接从某个地方操纵DOM。您创建了视图（也可以是指令），您的视图具有指定的控制器，您将附加功能放在服务中。 多数民众赞成！ Angular将为您完成所有其他工作。你想要从服务器显示一些东西？没问题，请致电您的服务器，并在您的视图上显示该数据。怎么样？只需将其分配到范围，然后从视图中填充。你想要一些帮手吗？你可以用服务做到！再次，忘记jquery和直接DOM操作。您使用基于MVC模式的MVVM框架。

P.S。如果想要真正了解棱角分明的角度tutorial是如何工作的。它解释了如何烹饪角度应用

Answer 2

最好的方法是创建工厂，并在两个模块中包含此工厂。之后，工厂中的所有内容都将在组件之间共享。

Angular - 两个组件相互通信

2 个答案: