angular : direative ：comunication 指令之間的通信

時間 2019-12-20

標籤 angular direative comunication 指令之間通信欄目 AngularJS 简体版

原文原文鏈接

在網絡上能夠找到多種指令之間的通信html

· $on，$emit，$boardcast （向上或向下冒泡）angularjs

· 指令return的required （^）向上一個scope通信，前提要先給scope一個nameajax

· 創建一個factory，讓須要通信的指令依賴注入factory服務api

以上均可以解決通信問題，可是在不一樣的情況下仍是會遇到代碼閱讀上的問題網絡

今天遇到的問題是當指令A的child的指令B要和指令A通信，同時指令C（不在指令A的child）要和指令A通信app

最終決定使用$on和$boardcast的方法ide

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>思塗客 Stooges</title>    
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
    
    <script> angular.module("app", []). directive("myParent", [function () { return { restrict: "E", link: function (scope) { }, controller: ["$scope", function ($scope) { var that = this; $scope.name = "parent"; that.alert = function () { $scope.name = "alert"; } $scope.$on("Main.myParent.alert", function (e, fn) { fn(that); }); }], scope: true, name: "myParent" } }]). directive("myChild", [function () { return { restrict: "E", require: "^myParent", link: function (scope, elem, attrs, myParent) { //myParent.alert();
 } } }]). directive("myOutputSide", ["$rootScope", function ($rootScope) { return { restrict: "E", link: function (scope, elem, attrs) { $rootScope.$broadcast("Main.myParent.alert", function (scope) { scope.alert(); }); } } }]); </script>
    
</head>
<body ng-app="app">
    <my-parent data-xx="{{name}}">   
        <my-child></my-child>         
    </my-parent>
    <my-output-side></my-output-side>
</body>
</html>