将值从指令传递到控制器答案

【问题标题】：Passing values from directive to controller将值从指令传递到控制器
【发布时间】：2018-05-08 21:29:10
【问题描述】：

下面是我的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>

为什么我收到的是“undefined”而不是“some message”

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

【问题讨论】：

标签： javascript angularjs

【解决方案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/

【讨论】：

【解决方案2】：

它有点怪癖......阅读更多关于它的信息here

你需要做的是 - 在下面更改

scope.fromDirectiveFn(scope.hello);

到

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

调用者和被调用者中的变量名应该相同

【讨论】：

【解决方案3】：

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

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

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

【讨论】：