角度 - 两个组件相互沟通

我仍然在尝试理解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（双关语intened）。我现在想要的是访问另一个指令。他们没有任何关联。

来源

2016-01-22 Tomek Buszewski

你介意把这个添加到plunkr吗？或者一个codepen？ –

有关可能的用途的更多信息是必需的。他们必须有父母/子女关系吗？如果有多个“噪音”元素，您会如何预测这种行为？ – estus

如果你想创建这个，你可以使用http://codepen.io/TheLarkInn/pen/zrRKGJ/我的angular 1.5 codepen模板。 –

如果你想创建将相互通信的组件，你应该创建服务，而不是指令。指令是一个组件主要用于HTML的一部分，或者使用作为html元素

在所有情况下的一个属性，它不会有什么是您使用（指令或服务）梅特，你必须inject一个到另一个，那么你可以调用注入组件的方法

UPDATE

如何注入到一些东西的角度？使用角度依赖注入器！答对了！如何注射？首先变种（您指定组件文件的依赖）：

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。它很好地解释了如何进行角度应用

来源

2016-01-22 19:32:26 Andrew

我目前的想法是创建somethiing作为加载指示器，所以我将不得不操纵DOM。从我发现的情况来看，指令和/或组件是为此制作的。 –

@TomekBuszewski，是的你说得对，指令是操纵DOM。但通过角度操作它意味着生成部分html。如果你想获得一些额外的数据为它创建一个服务，注入指令并使用。或者你可以在指令控制器中做到这一点，如果你想 – Andrew

任何想法，我怎样才能'注入'任何东西到'组件'？另外，我如何创建一个可以创建额外HTML的服务？ 'document.innerHTML'等？ –

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

来源

2016-01-22 19:39:44

角度 - 两个组件相互沟通

回答

相关问题