The DEMO

Question

我习惯在Angular工作，现在我在AngularJS工作（另一轮）

我有一个指令：

<li  ng-mouseover="vm.setCurrentEditedTile(item.id)">
   <panel-buttons-directive ></panel-buttons-directive>
</li>

我的panel-buttons-directive有一个名为ButtonsController的控制器。当用户悬停在<li>元素之上时，我想要的是，它运行一个位于子控制器内部的函数。所以我有一个单独的“模块”，我在指令中有按钮HTML，在控制器中有功能，我可以从父进程调用该函数。

链接：https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md

Answer 1

一种方法是让指令在初始化时发布API：

<fieldset ng-mouseover="pbdAPI.setCurrentEditedTile(item.id)">
  Mouseover Me
</fieldset>

<panel-buttons-directive on-init="pbdAPI=$API">
</panel-buttons-directive>

app.directive("panelButtonsDirective", function() {
  return {
    scope: { onInit: '&' },
    bindToController: true,
    controller: ButtonsController,
    controllerAs: '$ctrl',
    template: `<h3>Panel Buttons Component</h3>
               <p>Current edited tile = {{$ctrl.id}}</p>
               `,
  };
  function ButtonsController() {
    var $ctrl = this;
    var API = { setCurrentEditedTile: setCurrentEditedTile };
    this.$onInit = function() {
      this.onInit({$API: API});
    };
    function setCurrentEditedTile(id) {
      $ctrl.id = id;
    }
  }
})

上例中的指令使用表达式&绑定在初始化时发布其API。

The DEMO

＆＃13;

angular.module("app",[])
.directive("panelButtonsDirective", function() {
  return {
    scope: { onInit: '&' },
    bindToController: true,
    controller: ButtonsController,
    controllerAs: '$ctrl',
    template: `<h3>Panel Buttons Component</h3>
               <p>Current edited tile = {{$ctrl.id}}</p>
               `,
  };
  function ButtonsController() {
    var $ctrl = this;
    var API = { setCurrentEditedTile: setCurrentEditedTile };
    this.$onInit = function() {
      this.onInit({$API: API});
    };
    function setCurrentEditedTile(id) {
      $ctrl.id = id;
    }
  }
})

＆＃13;

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app">
    <h3>Mouseover Component DEMO</h3>
    <p><input ng-model="item.id" ng-init="item.id='tile0'"/></p>
    <fieldset ng-mouseover="pbdAPI.setCurrentEditedTile(item.id)">
      Mouseover Me
    </fieldset>
    <panel-buttons-directive on-init="pbdAPI=$API">
    </panel-buttons-directive>
  </body>

＆＃13;

AngularJS从Parent转换为Child Directive控制器功能

1 个答案:

The DEMO