将值从指令传递到控制器

Question

以下是我的html模板：

<div ng-app="dr" ng-controller="testCtrl">
    <test color1="color1" data-method="ctrlFn(msg)"></test>    
</div>

下面是我的代码：

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

app.controller("testCtrl", function($scope) {
    $scope.ctrlFn = function(arg) {        
        alert(arg);
    }

});
app.directive('test', function() {
    return {
        restrict: 'E',
        scope: {
            fromDirectiveFn: '&method'
        },
        link: function(scope, elm, attrs) {
            //Way One
            scope.hello = "some message";
            scope.fromDirectiveFn(scope.hello);
        }
    }
});

<div ng-app="dr" ng-controller="testCtrl">
    <test color1="color1" data-method="ctrlFn(msg)"></test>    
</div>

为什么我收到“ 未定义 ”而不是“ 某些消息 ”

下面是一个小提琴http://jsfiddle.net/j2K7N/27/

Answer 1

您的代码几乎是正确的，但是这里有几个问题：

<test color1="color1" data-method="ctrlFn(msg)"></test>

在这里，您从控制器传递了ctrlFn()函数，该函数采用一个未定义的参数msg ，该参数导致带有“未定义”文本的警报消息。 我建议将HTML代码修改为：

<test color1="color1" data-method="ctrlFn"></test>  

请注意，我将ctrlFn作为变量而不是函数传递。

在您的指令代码中，我将范围绑定更改为= ，以确保ctrlFn指向您的控制器函数。 这还将在指令的作用域和控制器（父）作用域之间建立双向绑定。 然后，该指令的整个JS代码将如下所示：

app.directive('test', function() {
    return {
        restrict: 'E',
        scope: {
            fromDirectiveFn: '=method'
        },
        link: function(scope, elm, attrs) {
            //Way One
            scope.hello = "some message";
            scope.fromDirectiveFn(scope.hello);
        }
    }
});

只需将&替换为= 。 工作叉： http : //jsfiddle.net/L8masomq/

Answer 2

这有点古怪... 在这里了解更多

您需要做的是-在下面进行更改

scope.fromDirectiveFn(scope.hello);

至

 scope.fromDirectiveFn({'msg' : scope.hello});

变量名称在调用方和被调用方中应相同

Answer 3

实际上，该代码是正确的。 但是，msg的值变得不确定。 因此，您的ctrlFn（msg）返回为未定义。 添加'msg'属性并分配scope.hello将解决此问题。 在此处检查改进的[Jsfiddle] [1]。

scope.fromDirectiveFn({'msg': scope.hello}); 

http://jsfiddle.net/imsabmaverick81/j2K7N/215/