Question

我有一个我在模板中使用的自定义指令。它为我做了一些DOM工作。我希望我使用该指令的主机视图/控制器能够在我的指令（以及它的控制器）上运行方法。但我不确定如何最好地调用指令范围。

我的观看代码：

<div ng-app="app">
    <div ng-controller="MainCtrl">
        <h3>Test App</h3>
        <button ng-click="scopeClear()">Parent Clear</button>
        <div my-directive string="myString"></div>
    </div>
</div>

这是自定义指令：

angular.module('components', []).directive('myDirective', function() {
    function link(scope, element, attrs) {
        scope.string = "";

        scope.$watch(attrs.string, function(value) {
            scope.string = value;
        });
    }

    return {
        controller: function($scope, $element) {
            $scope.reset = function() {
                $scope.string = "Hello";
            }
            $scope.clear = function() {
                $scope.string = "";
            }
        },
        template:
            "<button ng-click='reset()'>Directive Reset</button>" +
            "<button ng-click='clear()'>Directive Clear</button><br/>" +
            "<input type='text' ng-model='string'>",
        link: link
    }
});

和控制器：

angular.module('app', ['components']).controller('MainCtrl', function($scope) {
    $scope.myString = "Hello";

    $scope.scopeClear = function() {
        // How do I get this to call the clear() method on myDirective
    }
});

我找到的解决方法是jQuery（'＃my_directive'）。scope（）。myMethod（）;但这似乎是错误的，就像我错过了角色的一些更好的部分来做到这一点。

似乎和$ emit不在这里，因为我想要一个有针对性的方法，所以它不会触发我在同一页面上的指令的其他实例。

如何从父控制器访问指令方法？

Answer 1

我不确定我是否完全理解你的目标，你可以完全找到一个更好的模式。通常，指令显示作用域的状态，该作用域是隔离范围（如果它们是自给自足的）或共享范围。由于您没有创建隔离范围，因此它们从控制器继承范围。如果它们显示从控制器继承的数据，那么您不希望控制器调用指令，而只要控制器中的属性发生更改，指令就会“重绘”自身。

相反，如果您希望根据指令外部的事件重新计算指令中的某些内容，则不需要任何紧密耦合 - 尤其是在构建完全独立的模块时。在这种情况下，您可能只想使用MainCtrl中$ scope的$ broadcast来广播您可能关心的事件，然后您的指令可以提供$ on（'eventName'）处理程序。通过这种方式，它可以移植到任何可以触发此类事件的控制器/范围。

如果您发现自己需要知道控制器中的确切属性或指令中的确切功能，那么我建议您将这些部分紧密耦合，并且它们不属于单独的模块，因为它们永远不会重复使用。 Angular指令和控制器不是具有函数的对象，而是在该范围内的属性发生更改时通过$ digest调用创建范围和频繁更新的对象。因此，您可以找到一种方法来更好地模拟您正在显示的数据，对象和属性。但如果没有更大的背景，我不能说。

如何在我的自定义指令上触发方法？

1 个答案: