在不同的不相關元素上的指令之間進行通信

有兩種方法可以在兩個不同的不相關元素上的AngularJs指令之間進行通信嗎？當需要另一個的指令被放置在不同的不相關元素上時，鏈接函數沒有得到執行。在不同的不相關元素上的指令之間進行通信

http://plnkr.co/edit/DuXIRSBP1m4nX9r3Xc9x?p=info

// Code goes here 
 
var app = angular 
 
    .module("app", []); 
 

 
app.directive("monitorwindow", function() { 
 
    console.log("The monitorwindow directive has been called"); 
 
    return { 
 
    restrict: "A", 
 
    scope: {}, 
 
    controller: function($scope) { 
 
     $scope.heightl = 0; 
 
     $scope.widthl = 0; 
 

 
     this.updateHeight = function(uHeight) { 
 
     console.log("Height is updated: " + uHeight); 
 
     $scope.height = uHeight; 
 
     }; 
 

 
     this.updateWidth = function(uWidth) { 
 
     console.log("Width is udpated: " + uWidth); 
 
     $scope.width = uWidth; 
 
     }; 
 
    }, 
 
    link: function(scope, element, attrs) { 
 
     console.log("The monitorwindow directive has been linked"); 
 
    } 
 
    } 
 
}); 
 

 
app.directive("testobject", function() { 
 
    console.log("The test object directive has been called"); 
 
    return { 
 
    require: "^monitorwindow", 
 
    restrict: "A", 
 
    scope: {}, 
 
    link: function(scope, element, attrs, monitorwindow) { 
 
     console.log("The testobject directive is linked"); 
 
     element.resizable({ 
 
     handle: "e, w, n, s", 
 
     stop: onResizeComplete 
 
     }); 
 

 
     function onResizeComplete() { 
 
     monitorwindow.updateHeight(element.height()); 
 
     monitorwindow.updateWidth(element.width()); 
 
     } 
 
    } 
 
    } 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link data-require="[email protected]*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" /> 
 
    <link href="style.css" rel="stylesheet" /> 
 
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-app="app"> 
 
    <div monitorwindow> 
 
    <!--  <p>{{heightl}}</p> 
 
     <p>{{widthl}}</p> --> 
 
    </div> 
 
    <div testobject monitorwindow style="width:100px; height: 100px; background-color: red"></div> 
 
    <div testobject style="width:100px; height: 100px; background-color: yellow"></div> 
 
</body> 
 

 
</html>

來源

2015-10-05 nonexistential

閱讀錯誤...它告訴你，你不能在同一個元素上創建2個隔離範圍。對於更詳細的錯誤和堆棧跟蹤輸出，使用angular的開發版本 – charlietfl

您可以使用$rootScope，然後你可以通過使用角度信息指令之間comunicate。 $rootScope就像是所有應用程序的全局範圍，您甚至可以在指令和服務中使用它。

app.directive("monitorwindow", ['$rootScope', function($rootScope) { 
    $rootScope.$on('message', function(e,params){ 
     //.... 
    }); 
    .... 
    return { 
    restrict: "A", 
    scope: {}, 
    //.... 
    link: function(scope, element, attrs) { 
     $rootScope.$broadcast("message", data); //or 
     $rootScope.$emit("message", data) 
    } 
    } 
}]);

希望這會有所幫助，它只是一個想法。

來源

2015-10-05 12:36:38

在不同的不相關元素上的指令之間進行通信

回答

相關問題