将值从指令传递给控制器

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/