代码之家 › 专栏 › 技术社区 › user3406526

从外部调用指令控制器方法

directive angularjs javascript

user3406526 · 技术社区 · 7 年前

我编写了一个提供选项卡功能的指令,我使用最新版本的AngularJS(v1)。在我的指令中,我有一个将api公开给子指令的控制器,该范围在所有指令中都是隔离的:

父指令

scope: {},
controller: function($scope) {
   $scope.values = [];

   this.addValue = function(value) {
        $scope.values.push(value);
   }
}

链接函数的子指令

scope: {},
transclude: true,
template: '<div ng-transclude></div>',
replace: true,
link: function(scope, element, attr, parentCtrl)
{
    parentCtrl.addValues('test')
}

在child指令中,我有一个带有自己控制器的自定义html: TestCtrl

function TestCtrl($scope){
    var vm = this;
    ... other logic
}

实施

<parent>
   <child>
      <div ng-controller="TestCtrl as t">
          <button ng-click="addValues('new_test')"></button>
      </div>
   </child>
</parent>

我需要调用“addValues”方法(在指令控制器内)点击我的按钮。

如何组织代码来实现这一点?

1 回复 | 直到 7 年前

Drag13 7 年前

var module = angular.module('app', []);

module.controller('root', function ($scope) {
    $scope.test = function () {
        console.log('i am clicked');
    }
});

module.component('child', {
    template: '<button type="button" data-ng-click="$ctrl.click()">Click me</button>',
    controller: myController,
    bindings: {
        onClick: '&'
    }
});

function myController() {
    var ctrl = this;
    ctrl.click = function () {
        this.onClick();
    }
}

<html>

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
</head>
<body data-ng-app="app">

    <div data-ng-controller="root">
        <child data-on-click="test()"></child>
    </div>
</body>
</html>

这只是一个例子 Here 你可以阅读更多。希望这有帮助。

here