将值从指令传递给控制器 [英] Passing values from directive to controller
问题描述
以下是我的 html 模板:
<test color1="color1" data-method="ctrlFn(msg)"></test>
下面是我的代码:
var app = angular.module('dr', []);app.controller("testCtrl", function($scope) {$scope.ctrlFn = 函数(参数){警报(参数);}});app.directive('test', function() {返回 {限制:'E',范围: {fromDirectiveFn: '&method'},链接:函数(范围,榆树,属性){//方式一scope.hello = "一些消息";scope.fromDirectiveFn(scope.hello);}}});<div ng-app="dr" ng-controller="testCtrl"><test color1="color1" data-method="ctrlFn(msg)"></test>
为什么我收到未定义"而不是一些消息"
下面是一个小提琴http://jsfiddle.net/j2K7N/27/
您的代码几乎是正确的,但是您在这里遇到了几个问题:
<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() {返回 {限制:'E',范围: {fromDirectiveFn: '=method'},链接:函数(范围,榆树,属性){//方式一scope.hello = "一些消息";scope.fromDirectiveFn(scope.hello);}}});
只需将 &
替换为 =
.工作叉:http://jsfiddle.net/L8masomq/
Below is my html template:
<div ng-app="dr" ng-controller="testCtrl">
<test color1="color1" data-method="ctrlFn(msg)"></test>
</div>
Below is my code:
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>
Why am i getting "undefined" instead of "some message"
Below is a fiddle http://jsfiddle.net/j2K7N/27/
Your code is almost correct, however you had several issues here:
<test color1="color1" data-method="ctrlFn(msg)"></test>
Here you pass the ctrlFn()
function from your controller, which takes one undefined argument msg
, that causes the alert message with "undefined" text. I suggest to modify the HTML code to this:
<test color1="color1" data-method="ctrlFn"></test>
Note that I pass the ctrlFn
as a variable, not function.
In your directive code, I changed the scope binding to =
to make sure that the ctrlFn
will point to your controller function. This also sets up a two-way binding between the directive's scope and the controller (parent) scope. Then the whole JS code of the directive will look like this:
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);
}
}
});
Just replacing the &
to =
. Working fork: http://jsfiddle.net/L8masomq/
这篇关于将值从指令传递给控制器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!