Angular 1.5组件:传递函数
Angular 1.5组件:传递函数
提问于 2016-04-27 16:26:56
有没有可能把一个函数传递给一个组件，然后在组件内部调用这个传递参数的函数？
示例：
帖子列表
<post-list posts="blog.posts"
loading="blog.loadingPosts"
get-post-url="blog.getPostUrl"
is-user-authenticate="blog.user">
</post-list>getPostUrl是一个函数(在容器控制器内)：
const getPostUrl = (postId) => {
const protocol = $location.protocol();
const host = $location.host();
const port = $location.port();
return protocol + "://" + host + "" + (port !== 80 ? ":" + port : "") + "/blog/post/" + postId;
};帖子列表: component
const PostList = {
"bindings": {
"posts": "<",
"loading": "<",
"getPostUrl": "&", //Function getPostUrl
"isUserAuthenticate": "<"
},
"template": `<div>
<div class="col-md-9 text-center" data-ng-if="$ctrl.loading">
<i class="fa fa-spinner fa-spin fa-2x"></i>
</div>
<div class="col-md-9 posts" data-ng-if="!$ctrl.loading">
<div data-ng-repeat="post in $ctrl.posts">
<post creation-date="{{post.creationDate}}"
content="{{post.content}}"
post-url="{{$ctrl.getPostUrl(post.creationDate)}}"
is-user-authenticate="$ctrl.user">
</post>
</div>
</div>
</div>`,
"transclude": false
};
angular
.module("blog")
.component("postList", PostList);在这一行中：
我想调用传递参数的函数，这个函数返回一个字符串。
在post组件(不是PostList)中，postUrl是一个字符串属性@。
但是..。不起作用！
博客错误：$interpolate:interr无法插值：{{$ctrl.getPostUrl(post.creationDate)}} TypeError:无法使用' in‘运算符在1459329888892 Error Link中搜索'blog’
有可能做到这一点吗？又是如何做到的？
非常感谢!
回答 4
Stack Overflow用户
回答已采纳
发布于 2016-04-27 17:00:18
如果你想从组件内部调用函数并让它返回值，那么你需要双向绑定：
"bindings": {
"posts": "<",
"loading": "<",
"getPostUrl": "=", // <-- two-way binding
"isUserAuthenticate": "<"
},然而，这可能不是一个好主意。考虑将数据传递给组件，而不是从外部请求组件数据。这将使隔离组件变得更好。
Stack Overflow用户
发布于 2016-08-15 17:28:54
您可以将函数传递给组件，但必须将函数参数定义为object，并将正确的参数名称作为其键。示例：
<post-list posts="blog.posts"
loading="blog.loadingPosts"
get-post-url="blog.getPostUrl(postId)"
is-user-authenticate="blog.user">
</post-list>
const PostList = {
"bindings": {
"posts": "<",
"loading": "<",
"getPostUrl": "&", //Function getPostUrl
"isUserAuthenticate": "<"
},
"template": `<post creation-date="{{post.creationDate}}"
content="{{post.content}}"
post-url="{{$ctrl.getPostUrl({postId:post.creationDate})}}">
</post>Stack Overflow用户
发布于 2019-03-27 04:10:42
若要向绑定函数返回值，必须将其作为对象文字传递。
self.selected({id：'42'，名：'Douglas'，姓：'Adams'})；
angular.module('webapp').component('myComponent', {
templateUrl: 'myComponent.html',
bindings: {
selected: '&'
},
controller: function () {
var self = this;
self.someEvent= function(){
self.selected({id: '42', firstname: 'Douglas', lastname: 'Adams'});
};
}
});之后，您可以通过对象的属性来访问对象文字值。
id，名字，姓氏。
您还可以将其他参数传递给函数。(myVariable)
<div>
<span ng-init="myVariable='Universe'">
<my-component selected="myFunction(id, firstname, lastname, myVariable)"></my-component>
</div>
$scope.myFunction = function(id, firstname, lastname, myVariable){
console.log(id, firstname, lastname, myVariable);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36884303
复制相关文章
相似问题