AngularJs中另一個指令的調用控制器

Question

如何在同一元素的另一個指令中從$ apply引用指令的控制器功能？ 例：

<myelement hint="myelement.controller.getMe()">hoverMe</myelement>

app.directive("myelement", function () {
    return {
        restrict: "E",
        controller: function ($scope) {
            this.getMe = function () {
                return "me";
            };
        }
    }
});

app.directive("hint", function () {
    return {
        restrict: "A",
        controller: function ($rootScope) {
          this.showHint = function (getMsg) {
            alert($rootScope.$apply(getMsg)); //what should be written here?
          }
        },
        link: function (scope, element, attrs, controller) {
            element.bind("mouseenter", function () {
              controller.showHint(attrs.hint);
            });
        }
    }
});

資料來源： http : //plnkr.co/edit/9qth9N?p=preview

Answer 1

使用require（ 在此處了解更多信息）。

app.directive("hint", function () {
  return {
    restrict: "A",
    require: ["myelement", "hint"],
    controller: function ($scope) {
      this.showHint = function (msg) {
        alert($scope.$apply(msg)); //what should be written here?
      }
    },
    link: function (scope, element, attrs, ctrls) {
        var myElementController = ctrls[0],
            hintController = ctrls[1];

        element.bind("mouseenter", function () {
          hintController.showHint(myElementController.getMsg());
        });
    }
  }
});

---

更新（關於使提示變得通用，請參閱下面的評論）

要使Hint指令通用，可以使用$ scope作為它們之間的媒介。

app.directive("myelement", function () {
 return {
    restrict: "E",
    controller: function ($scope) {
        $scope.getMe = function () {
            return "me";
        };
    }
 }
});

<myelement hint="getMe()">hoverMe</myelement>

唯一的變化是， getMe消息不是在控制器（ this.getMe ）中而是在$ scope（ $scope.getMe ）中設置的。