Question

我正在尝试从指令模板中使用Controller as语法定义的父控制器中调用某些方法，但我无法使用隔离范围执行此操作。我可以编写没有隔离范围的指令但在这种情况下我不能重复使用它。

简单示例：

angular.module('app', [])
    .controller('myController', function() {
        var result_el = document.getElementById("log");
        this.log = function(text) {
            var p = document.createElement("p");
            p.innerHTML = text;
            result_el.appendChild(p);
        }
    })
    .directive('myDirective', function() {
        return {
            restrict: 'E',
            scope: {},
            template: '<button ng-click="mCtrl.log(123)">Click me!</button>'
        }
    });

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

<div ng-app="app" ng-controller="myController as mCtrl">
    <my-directive></my-directive>
</div>
<div id="log"></div>

是否可以从指令的模板调用父控制器的函数？

Answer 1

angular.module('app', [])
    .controller('myController', function() {
        var result_el = document.getElementById("log");
        this.log = function(text) {
            var p = document.createElement("p");
            p.innerHTML = text;
            result_el.appendChild(p);
        }
    })
    .directive('myDirective', function() {
        return {
            restrict: 'E',
            scope: {myFunc: '&'},

            template: '<button ng-click="myFunc()">Click me!</button>'
        }
    });

将您的模板设为

<my-directive myFunc="log(123)"></my-directive>

从指令的模板访问命名控制器的方法

1 个答案: