如何将AngularJS指令中的值传递给父控制器中的函数
如何将AngularJS指令中的值传递给父控制器中的函数
提问于 2018-08-16 03:43:20
我使用的是Anguljarjs 1.4x。我试图将外部函数的值传回给指令。我以前做过一些类似的事情，但由于某种原因，函数参数没有返回给我的控制器。
这是一些我必须将外部函数传递给指令的有效plunker代码。我现在要做的是添加一个文本参数值。
index.html
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.4.2" data-semver="1.4.2" src="https://code.angularjs.org/1.4.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div id="app" ng-app="app">
<div ng-controller="mainCtrl">
<my-directive ctrl-fn="ctrlFn()"></my-directive>
</div>
</div>
</body>
</html>myPage.html
<div>
<button ng-click='ctrlFn()'>Click Here</button>
</div>script.js
var app = angular.module('app', []);
app.controller('mainCtrl', function($scope){
$scope.count = 0;
$scope.ctrlFn = function() {
console.log('In mainCtrl ctrlFn!');
$scope.count += 10;
console.log("count is: " + JSON.stringify($scope.count));
};
});
app.directive('myDirective', function() {
return {
restrict: 'E',
scope: {
'ctrlFn' : '&'
},
// template: "<div><button ng-click='ctrlFn()'>Click Here</button></div>",
templateUrl: "./myPage.html",
link: function(scope, element, attributes) {
scope.ctrlFn();
console.log("In link!");
}
};
});当应用程序运行时，我得到这样的结果:在mainCtrl ctrlFn中！
计数为: 10
在链接中！
在我点击按钮后，我得到了这个: In mainCtrl ctrlFn！
计数为: 20
正如我所说的，这一切都是有效的，直到我添加了一个参数。我所要做的就是添加一个文本参数，但是当我在myPage.html中尝试这样做时，我得到了一个错误：
错误:无法使用' in‘运算符在'ctrlFn’中搜索'hello‘
<button ng-click='ctrlFn('hello')'>Click Here</button>我在ng-click函数中添加了一个文本值，然后在列出该函数的其他位置创建了一个参数。
关于如何做到这一点，有什么想法吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-16 03:55:34
在指令模板中使用：
template: `
<button ng-click="ctrlFn({$event: 'hello'})">
Click Here
</button>
`,按如下方式使用该指令：
<my-directive ctrl-fn="ctrlFn($event)"></my-directive> The DEMO on PLNKR
var app = angular.module('app', []);
app.controller('mainCtrl', function($scope){
$scope.count = 0;
$scope.ctrlFn = function(value) {
$scope.count += 10;
$scope.message = value;
};
});
app.directive('myDirective', function() {
return {
restrict: 'E',
scope: {
'ctrlFn' : '&'
},
template: `
<div>
<button ng-click="ctrlFn({$event:'hello'})">
Click Here
</button>
</div>
`,
link: function(scope, element, attributes) {
scope.ctrlFn();
}
};
});<script src="//unpkg.com/angular@1.4/angular.js"></script>
<body ng-app="app" ng-controller="mainCtrl">
<my-directive ctrl-fn="ctrlFn($event)"></my-directive>
message={{message}}<br>
count={{count}}
</body>
使用表达式("&")绑定，定义属性：
<my-directive my-func="parentFn($event)">
</my-directive>使用定义为本地变量的$event参数调用函数：
export default function myDirective() {
'ngInject';
return {
restrict: 'A',
scope: {
'myFunc': '&'
},
templateUrl: "./myPage.html",
controller: myCtrl
};
function myCtrl($scope) {
'ngInject';
console.log("In myCtrl!");
var answer = $scope.myFunc({$event: "Hello"});
console.log(answer);
}
}Stack Overflow用户
发布于 2018-08-16 14:02:12
这里是你的代码的一个有效的插入器。
https://next.plnkr.co/edit/TWQEUUWq6h55uOIXDbuR
基本上，您需要从指令中删除括号
<my-directive ctrl-fn="ctrlFn"></my-directive> 然后在调用函数之前(在指令中)展开它。
scope.ctrlFn = scope.ctrlFn();此答案提供了有关展开函数的详细信息。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51865386
复制相关文章
相似问题
腾讯云开发者
