角度 - 兩個組件相互溝通

我仍然在嘗試理解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

角度 - 兩個組件相互溝通

回答

相關問題