1
我试图创建Angualr JS自定义过滤器(创建我的种子工程与FountainJS,我设定的角度JS,Webpacks和巴贝尔)创建自定义与组件的WebPack过滤角JS(FountainJS)
的问题在于,用这种组件方式在Angular JS中用Webpacks编写代码的事实,我不知道如何设置自定义过滤器,我试图创建它,就像一个简单的函数一样,它返回另一个函数,就像普通过滤器一样,称为Todd Mott here。
那么,这里是我的组件。
class ContactsController{
/** @ngInject */
constructor($http) {
$http
.get('app/contacts/contacts.json')
.then(response => {
this.contacts = response.data;
});
}
getContacts(){
return this.contacts;
}
setFilterContacts(filter){
this.filterSelected = filter;
}
getFilterContacts(){
return this.filterSelected;
}
getContactsFiltered(){
return function(){
this.filter = getFilterContacts();
if (this.filter === undefined){
return this.getContacts();
}
this.contactsFiltered = [];
this.contacts.forEach(function (item, index, array) {
if (item.name.startsWith(this.filter)){
this.contactsFiltered.push(item);
};
});
return this.contactsFiltered;
};
}
}
export const contacts = {
templateUrl: 'app/contacts/contacts.html',
controller: ContactsController
};
这里为与指令和过滤器
<ul style="list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;">
<li style="float: left;"><button ng-click="$ctrl.setFilterContacts()">Todos</button></li>
<li style="float: left;"><button ng-click="$ctrl.setFilterContacts('j')">a</button></li>
</ul>
<intelico-contact ng-repeat="contact in $(ctrl.contacts | orderBy: 'name' | $ctrl.getContactsFiltered()" contact="contact">
</intelico-contact>
我在控制台
angular.js?3437:13708 Error: [$parse:syntax] Syntax Error: Token '.' is unexpected, expecting [)] at column 42 of the expression [($ctrl.contacts | orderBy: 'name' | $ctrl.getContactsFiltered())] starting at [.getContactsFiltered())].
http://errors.angularjs.org/1.5.7/$parse/syntax?p0=.&p1=is%20unexpected%2C%20expecting%20%5B)%5D&p2=42&p3=(trl.contacts%20%7C%orderBy%3A%20'name'%20%7C%20%24ctrl.getContactsFiltered())&p4=.getContactsFiltered())
at eval (eval at <anonymous> (http://localhost:3000/index.js:128:2), <anonymous>:68:12)
at Object.throwError (eval at <anonymous> (http://localhost:3000/index.js:128:2), <anonymous>:14343:11)
at Object.consume (eval at <anonymous> (http://localhost:3000/index.js:128:2), <anonymous>:14355:12)
at Object.primary (eval at <anonymous> (http://localhost:3000/index.js:128:2), <anonymous>:14217:12)
at Object.unary (eval at <anonymous> (http://localhost:3000/index.js:128:2), <anonymous>:14209:19)
at Object.multiplicative (eval at <anonymous> (http://localhost:3000/index.js:128:2), <anonymous>:14196:21)
at Object.additive (eval at <anonymous> (http://localhost:3000/index.js:128:2), <anonymous>:14187:21)
at Object.relational (eval at <anonymous> (http://localhost:3000/index.js:128:2), <anonymous>:14178:21)
at Object.equality (eval at <anonymous> (http://localhost:3000/index.js:128:2), <anonymous>:14169:21)
at Object.logicalAND (eval at <anonymous> (http://localhost:3000/index.js:128:2), <anonymous>:14161:21)(anonymous function) @ angular.js?3437:13708(anonymous function) @ angular.js?3437:10347invokeLinkFn @ angular.js?3437:9816nodeLinkFn @ angular.js?3437:9215compositeLinkFn @ angular.js?3437:8510nodeLinkFn @ angular.js?3437:9210(anonymous function) @ angular.js?3437:9553processQueue @ angular.js?3437:16170(anonymous function) @ angular.js?3437:16186$eval @ angular.js?3437:17444$digest @ angular.js?3437:17257$apply @ angular.js?3437:17552done @ angular.js?3437:11697completeRequest @ angular.js?3437:11903requestLoaded @ angular.js?3437:11836
也试过这样得到这个错误的观点,但我有另一个错误:
<intelico-contact ng-repeat="contact in ($ctrl.getContactsFiltered() | orderBy: 'name')" contact="contact"></intelico-contact>
Error: [orderBy:notarray] Expected array but received: function()
http://errors.angularjs.org/1.5.7/orderBy/notarray?p0=function%20()
at eval (eval at <anonymous> (index.js:128), <anonymous>:68:12)
at eval (eval at <anonymous> (index.js:128), <anonymous>:21428:30)
at fn (eval at compile (eval at <anonymous> (index.js:128)), <anonymous>:4:374)
at regularInterceptedExpression (eval at <anonymous> (index.js:128), <anonymous>:15831:55)
at Scope.$digest (eval at <anonymous> (index.js:128), <anonymous>:17277:34)
at Scope.$apply (eval at <anonymous> (index.js:128), <anonymous>:17552:24)
at done (eval at <anonymous> (index.js:128), <anonymous>:11697:47)
at completeRequest (eval at <anonymous> (index.js:128), <anonymous>:11903:7)
at XMLHttpRequest.requestLoaded (eval at <anonymous> (index.js:128), <anonymous>:11836:9)
是的,但即时编码像Angular'组件'风格和语法和编写代码角度改变一点点的方式,看看这个: https://toddmotto.com/exploring-the-角-1-5成分-方法/ https://docs.angularjs.org/tutorial/step_03 – Merlyn007
你错,有像像过滤器组件没有这样的事情。你应该学习差异。组件,过滤器,服务等都有不同的用例。你不能也不应该尝试使用金色哈默这样的组件。 – sielakos