Question

您好我一直试图从我的指令中调用一个控制器函数但是我没有这样做，在指令中我尝试了单向和双向绑定但无济于事，现在在控制台日志中我可以看到当ng-mouseenter事件被trigerred时，会调用actOnMouseEnter函数。在开发工具中应用断点时，我看到＆＃34; scope.onMouseEnterNotify（{name：scope.name，hoveredEntry：entry}）;＆＃34; 被命中，但控制器中的函数永远不会被调用。

如果我错了，请纠正我，因为我们在指令中创建了一个新的范围，我们从html传递的函数是＆＃39; on-mouse-enter-notify =＆＃39; onMouseEnterCallback（name， hoveredEntry）＆＃39;绑定到指令中的onMouseEnterNotify属性，我们可以在以后想要在控制器中调用该函数时使用该属性。

我是棱角分明的新手，请帮助。

指令

(function () {

var canvas;
var directiveWithArg = function () {
    return {
        restrict: 'EA',
        scope: {
            componentName: '=',
            componentArgs: '=',
            onMouseEnterNotify: '&',
            onMouseLeave: '&'
        },
        templateUrl: 'shared/directives/_draw_square_variable_param.html',
        link: function (scope, element) {

            scope.$watch('[componentName,componentArgs]', function (newValue) {
                var canvas = document.getElementById("canvas");
                canvas.id = newValue[0];
                scope.entries = [];
                scope.name = newValue[0];
                scope.entries = newValue[1];
            }, true)

            scope.actOnMouseEnter = function( entry ) {
                console.log( "In side actOnMouseEnter");
                scope.onMouseEnterNotify({name: scope.name, hoveredEntry:entry});
            }

            scope.actOnMouseLeave = function(entry) {
                console.log( "Out of hovering area " + entry );
            }
        }
    };
};

app.directive('squareDrawVariableArgs', directiveWithArg);

}（））;

对应HTML

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div>
    <div id="canvas" class="panel panel-danger" style="max-width: 150px">
        <div class="panel-heading">
            <h1 class="panel-title image-holder-heading" style="font-size: 10px" ng-model="name">
                {{name}}
            </h1>
        </div>
        <div class="panel-body">
            <table>
                <tr ng-repeat="p in entries" style=" color: #CCCCFF"  id={{p}} ng-mouseenter="actOnMouseEnter(p)" ng-mouseleave="actOnMouseLeave(p)" >
                    <td >
                        <span class="label label-info" ng-model="p">{{p + "testing app"}}</span>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
</body>
</html>

从中调用此指令的HTML：

   <div class="row top-buffer">
        <square-draw-variable-args component-name='testName' component-args='myTestArray' ng-model='testName' on-mouse-enter-notify='onMouseEnterCallback(name,hoveredEntry)'></square-draw-variable-args>
    </div>

对应JS

   'use strict';

    app.controller('MddController', function ($rootScope, $scope, $interval, mddErrorPanelFactory) {

        $scope.testName = "Testing the new directive";
        $scope.myTestArray = [1,2,3,4];

   var onMouseEnterCallback = function( name, hoveredEntry ) {
        console.log( " +++ name " + name + " hovered entry " + hoveredEntry );
    }

}）;

AngularJS：无法从指令调用控制器中的函数

0 个答案: