Question

有没有办法在两个AngularJs指令之间进行通信，这些指令放在不同的不相关元素上？当需要另一个的指令被放置在不同的不相关元素上时，链接函数不会被执行。

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

＆＃13;

// 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());
      }
    }
  }
});

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link data-require="jqueryui@*" 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>

＆＃13;

在不同无关元素

0 个答案: