Question

我创建了一个angular指令，用于在我的父控制器中调用一个接受参数的方法（true / false）在我的父控制器中有一个方法

   app.controller('MyCtrl', function($scope){ 

     $scope.myMethod = function(val) {
       alert(val)

     };
});

在我的指令

中

app.directive('confirmBox',function() {
    return {
        restrict: 'E',
        template: '<div>' +

            '<button ng-click="controlfunc(true)">Yes</button>' + 
            '<button ng-click="controlfunc(false)">No</button>' + 
         '</div>',
        scope: {

            controlfunc: '&funcattribute',

        },
        controller: function($scope) {                  
        }
    };
});

和html代码是

 <confirm-box  funcattribute="myMethod()" ></confirm-box>

当我点击按钮时，我得到'未定义'

PLUNKR

Answer 1

在编写自定义指令时，这是一个非常常见的任务，记住如何以及在何处定义参数名称以及工具如何调用回调总是有点棘手。来自https://docs.angularjs.org/guide/directive

通常需要将数据从隔离范围通过表达式传递到父作用域，这可以通过将局部变量名称和值的映射传递到表达式包装器fn来完成。例如，hideDialog函数会在隐藏对话框时显示一条消息。这在指令中通过调用close（{message：'closing for now'}）
来指定

对于您的示例，您必须将参数表达式修改为

<confirm-box  funcattribute="myMethod(value)"></confirm-box>

并像这样调用回调：

<button ng-click="controlfunc({ value : true })">Yes</button>
<button ng-click="controlfunc({ value : false })">No</button>

http://jsfiddle.net/so8sfryv/1/

Answer 2

&的问题是你没有传递这个功能。在指令中调用函数controlfunc后，将调用属性中提供的函数，即myMethod()。因此，在调用myMethod时，您实际上并未调用controlfunc，只是告诉它调用所提供的方法。并且提供的方法myMethod()没有任何参数，这就是您看到未定义的原因。

您可以$emit来自子范围的事件并侦听父范围，以查看结果。我编辑了plunkr以显示此方法

Answer 3

这从根本上说是错误的。可能有办法做到这一点，但你真的不应该。

angular.module('MyApp', []);
angular.module('MyApp')
    .controller('ConfirmController', [function() {
        var vm = this;
        vm.clickHandler = function(value) {
            alert(value);
        };
    }]);

angular.module('MyApp')
    .directive('confirmBox', [function() {
        return {
            scope: true,
            restrict: 'E',
            controller: 'ConfirmController',
            controllerAs: 'confirmCtrl',
            template:   '<div>'+
                            '<button ng-click="confirmCtrl.clickHandler(true)">Yes</button>'+
                            '<button ng-click="confirmCtrl.clickHandler(false)">No</button>'+
                        '</div>'
        };
    }]);

因为您还没有真正指定应该做什么，所以这就是您应该如何使用控制器和指令。

我猜这不是你想要或需要的，但你需要在多个控制器中使用一个功能吗？如果是这样的话，那么你应该使用服务。

简短而简单，指令只应定义指令及其所需的不同类控制器只应用于获取应在指令中显示的数据所有其他逻辑应该在服务中处理。

编辑：您应该阅读Papa Johns styleguide，这是一个很好的资源。

Answer 4

我想知道你为什么需要myMethod（）？您可以将控制功能添加到您的指令中，如下所示：

app.directive('confirmBox', function() {
  return {
    restrict: 'E',
    template: '<div>' +

      '<button ng-click="controlfunc(true)">Yes</button>' +
      '<button ng-click="controlfunc(false)">No</button>' +
      '</div>',

    controller: function($scope) {

      $scope.controlfunc = function(val) {
        alert(val);
        $scope.funcattribute = val;
      }

    }
  };
});

调用带有角度指令

4 个答案: