{"id":32361,"date":"2024-11-25T09:25:29","date_gmt":"2024-11-25T01:25:29","guid":{"rendered":"https:\/\/fwq.ai\/blog\/32361\/"},"modified":"2024-11-25T09:25:29","modified_gmt":"2024-11-25T01:25:29","slug":"creating-a-custom-directive-for-wordpress-post-listing-on-the-front-end","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/32361\/","title":{"rendered":"Creating a Custom Directive for WordPress Post Listing on the Front End"},"content":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/465\/014\/169335439441735.jpg\" class=\"aligncenter\" title=\"Creating a Custom Directive for WordPress Post Listing on the Front End\u63d2\u56fe\" alt=\"Creating a Custom Directive for WordPress Post Listing on the Front End\u63d2\u56fe\" \/><\/p>\n<\/p>\n<p>\u5728\u672c\u7cfb\u5217\u7684\u524d\u4e00\u90e8\u5206\u4e2d\uff0c\u6211\u4eec\u5f15\u5bfc\u4e86 AngularJS \u5e94\u7528\u7a0b\u5e8f\uff0c\u4e3a\u4e0d\u540c\u89c6\u56fe\u914d\u7f6e\u4e86\u8def\u7531\uff0c\u5e76\u56f4\u7ed5\u5e16\u5b50\u3001\u7528\u6237\u548c\u7c7b\u522b\u7684\u8def\u7531\u6784\u5efa\u4e86\u670d\u52a1\u3002\u4f7f\u7528\u8fd9\u4e9b\u670d\u52a1\uff0c\u6211\u4eec\u73b0\u5728\u7ec8\u4e8e\u80fd\u591f\u4ece\u670d\u52a1\u5668\u83b7\u53d6\u6570\u636e\u6765\u4e3a\u524d\u7aef\u63d0\u4f9b\u52a8\u529b\u3002<\/p>\n<\/p>\n<p>\u5728\u672c\u7cfb\u5217\u7684\u8fd9\u4e00\u90e8\u5206\u4e2d\uff0c\u6211\u4eec\u5c06\u81f4\u529b\u4e8e\u4e3a\u5e16\u5b50\u5217\u8868\u529f\u80fd\u6784\u5efa\u81ea\u5b9a\u4e49 AngularJS \u6307\u4ee4\u3002\u5728\u672c\u7cfb\u5217\u7684\u5f53\u524d\u90e8\u5206\u4e2d\uff0c\u6211\u4eec\u5c06\uff1a<\/p>\n<\/p>\n<ul>\n<li>\u4ecb\u7ecd AngularJS \u6307\u4ee4\u4ee5\u53ca\u4e3a\u4ec0\u4e48\u6211\u4eec\u5e94\u8be5\u521b\u5efa\u4e00\u4e2a<\/li>\n<li>\u89c4\u5212\u5e16\u5b50\u5217\u8868\u529f\u80fd\u7684\u6307\u4ee4\u53ca\u5176\u6240\u9700\u7684\u53c2\u6570\n<\/p>\n<\/li>\n<li>\u4e3a\u5e16\u5b50\u5217\u8868\u521b\u5efa\u81ea\u5b9a\u4e49 AngularJS \u6307\u4ee4\u53ca\u5176\u6a21\u677f\n<\/p>\n<\/li>\n<\/ul>\n<p>\u6240\u4ee5\u8ba9\u6211\u4eec\u9996\u5148\u4ecb\u7ecd\u4e00\u4e0b AngularJS \u6307\u4ee4\u4ee5\u53ca\u4e3a\u4ec0\u4e48\u6211\u4eec\u9700\u8981\u5b83\u4eec\u3002<\/p>\n<\/p>\n<h2>AngularJS \u6307\u4ee4\u7b80\u4ecb<\/h2>\n<\/p>\n<p>AngularJS \u4e2d\u7684\u6307\u4ee4\u662f\u4e00\u79cd\u4fee\u6539 HTML \u5143\u7d20\u884c\u4e3a\u548c\u91cd\u7528\u53ef\u91cd\u590d\u4ee3\u7801\u5757\u7684\u65b9\u6cd5\u3002\u5b83\u4eec\u53ef\u7528\u4e8e\u4fee\u6539 HTML \u5143\u7d20\u53ca\u5176\u5b50\u5143\u7d20\u7684\u7ed3\u6784\uff0c\u56e0\u6b64\u5b83\u4eec\u662f\u5f15\u5165\u81ea\u5b9a\u4e49 UI \u5c0f\u90e8\u4ef6\u7684\u5b8c\u7f8e\u65b9\u5f0f\u3002<\/p>\n<\/p>\n<p>\u5728\u5206\u6790\u672c\u7cfb\u5217\u7b2c\u4e00\u90e8\u5206\u4e2d\u7684\u7ebf\u6846\u56fe\u65f6\uff0c\u6211\u4eec\u6ce8\u610f\u5230\u5e16\u5b50\u5217\u8868\u529f\u80fd\u5728\u4e09\u4e2a\u89c6\u56fe\u4e2d\u4f7f\u7528\uff0c\u5373\uff1a<\/p>\n<\/p>\n<ol>\n<li>\u53d1\u5e03\u5217\u8868<\/li>\n<li>\u4f5c\u8005\u7b80\u4ecb\n<\/p>\n<\/li>\n<li>\u7c7b\u522b\u5e16\u5b50\u5217\u8868\n<\/p>\n<\/li>\n<\/ol>\n<p>\u56e0\u6b64\uff0c\u6211\u4eec\u53ef\u4ee5\u521b\u5efa\u4e00\u4e2a\u81ea\u5b9a\u4e49 AngularJS \u6307\u4ee4\uff0c\u5176\u4e2d\u5305\u542b\u4f7f\u7528\u6211\u4eec\u5728\u672c\u7cfb\u5217\u524d\u9762\u90e8\u5206\u521b\u5efa\u7684\u670d\u52a1\u6765\u68c0\u7d22\u5e16\u5b50\u7684\u4e1a\u52a1\u903b\u8f91\uff0c\u800c\u4e0d\u662f\u7f16\u5199\u5355\u72ec\u7684\u529f\u80fd\u6765\u5217\u51fa\u8fd9\u4e09\u4e2a\u9875\u9762\u4e0a\u7684\u5e16\u5b50\u3002\u9664\u4e86\u4e1a\u52a1\u903b\u8f91\u4e4b\u5916\uff0c\u8be5\u6307\u4ee4\u8fd8\u5c06\u5305\u542b\u5728\u67d0\u4e9b\u89c6\u56fe\u4e0a\u5217\u51fa\u5e16\u5b50\u7684\u6e32\u67d3\u903b\u8f91\u3002\u4e5f\u5728\u8be5\u6307\u4ee4\u4e2d\u5b9a\u4e49\u4e86\u5e16\u5b50\u5206\u9875\u548c\u6839\u636e\u67d0\u4e9b\u6761\u4ef6\u68c0\u7d22\u5e16\u5b50\u7684\u529f\u80fd\u3002<\/p>\n<\/p>\n<p>\u56e0\u6b64\uff0c\u4e3a\u5e16\u5b50\u5217\u8868\u529f\u80fd\u521b\u5efa\u81ea\u5b9a\u4e49 AngularJS \u6307\u4ee4\u5141\u8bb8\u6211\u4eec\u4ec5\u5728\u4e00\u4e2a\u4f4d\u7f6e\u5b9a\u4e49\u8be5\u529f\u80fd\uff0c\u8fd9\u5c06\u4f7f\u6211\u4eec\u5c06\u6765\u66f4\u5bb9\u6613\u6269\u5c55\u6216\u4fee\u6539\u6b64\u529f\u80fd\uff0c\u800c\u65e0\u9700\u66f4\u6539\u5176\u4e2d\u7684\u4ee3\u7801\u4f7f\u7528\u5b83\u7684\u6240\u6709\u4e09\u4e2a\u5b9e\u4f8b\u3002<\/p>\n<\/p>\n<p>\u8bdd\u867d\u5982\u6b64\uff0c\u8ba9\u6211\u4eec\u5f00\u59cb\u4e3a\u5e16\u5b50\u5217\u8868\u529f\u80fd\u7f16\u5199\u81ea\u5b9a\u4e49\u6307\u4ee4\u3002<\/p>\n<\/p>\n<h2>\u89c4\u5212\u5e16\u5b50\u5217\u8868\u7684\u81ea\u5b9a\u4e49 AngularJS \u6307\u4ee4<\/h2>\n<\/p>\n<p>\u5728\u6211\u4eec\u5f00\u59cb\u7f16\u5199\u7528\u4e8e\u6784\u5efa\u5e16\u5b50\u5217\u8868\u529f\u80fd\u6307\u4ee4\u7684\u4efb\u4f55\u4ee3\u7801\u4e4b\u524d\uff0c\u8ba9\u6211\u4eec\u5206\u6790\u4e00\u4e0b\u6307\u4ee4\u4e2d\u6240\u9700\u7684\u529f\u80fd\u3002<\/p>\n<\/p>\n<p>\u5728\u6700\u57fa\u672c\u7684\u5c42\u9762\u4e0a\uff0c\u6211\u4eec\u9700\u8981\u4e00\u4e2a\u53ef\u4ee5\u5728\u5e16\u5b50\u5217\u8868\u3001\u4f5c\u8005\u4e2a\u4eba\u8d44\u6599\u548c\u7c7b\u522b\u9875\u9762\u7684\u89c6\u56fe\u4e0a\u4f7f\u7528\u7684\u6307\u4ee4\u3002\u8fd9\u610f\u5473\u7740\u6211\u4eec\u5c06\u521b\u5efa\u4e00\u4e2a\u653e\u7f6e\u5728 HTML \u4e2d\u7684\u81ea\u5b9a\u4e49 UI \u5c0f\u90e8\u4ef6\uff08\u6216 DOM \u6807\u8bb0\uff09\uff0cAngularJS \u5c06\u6839\u636e\u6211\u4eec\u4e3a\u6307\u4ee4\u7684\u7279\u5b9a\u5b9e\u4f8b\u63d0\u4f9b\u7684\u9009\u9879\u6765\u5904\u7406\u5176\u4f59\u7684\u4e8b\u60c5\u3002<\/p>\n<\/p>\n<p>\u56e0\u6b64\uff0c\u6211\u4eec\u5c06\u521b\u5efa\u4e00\u4e2a\u7531\u4ee5\u4e0b\u6807\u8bb0\u6807\u8bc6\u7684\u81ea\u5b9a\u4e49 UI \u5c0f\u90e8\u4ef6\uff1a<\/p>\n<pre>&lt;post-listing&gt;&lt;\/post-listing&gt;<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n<p>\u4f46\u662f\u6211\u4eec\u8fd8\u9700\u8981\u8fd9\u4e2a\u6307\u4ee4\u662f\u7075\u6d3b\u7684\uff0c\u5373\u5c06\u53c2\u6570\u4f5c\u4e3a\u8f93\u5165\u5e76\u91c7\u53d6\u76f8\u5e94\u7684\u884c\u52a8\u3002\u8003\u8651\u7528\u6237\u4e2a\u4eba\u8d44\u6599\u9875\u9762\uff0c\u6211\u4eec\u53ea\u5e0c\u671b\u663e\u793a\u5c5e\u4e8e\u8be5\u7279\u5b9a\u7528\u6237\u7684\u5e16\u5b50\uff0c\u6216\u8005\u7c7b\u522b\u9875\u9762\uff0c\u5176\u4e2d\u5c06\u5217\u51fa\u5c5e\u4e8e\u8be5\u7c7b\u522b\u7684\u5e16\u5b50\u3002\u8fd9\u4e9b\u53c2\u6570\u53ef\u4ee5\u901a\u8fc7\u4ee5\u4e0b\u4e24\u79cd\u65b9\u5f0f\u63d0\u4f9b\uff1a<\/p>\n<\/p>\n<ol>\n<li>\u5728 URL \u4e2d\u4f5c\u4e3a\u53c2\u6570<\/li>\n<li>\u76f4\u63a5\u5c06\u6307\u4ee4\u4f5c\u4e3a\u5c5e\u6027\u503c\n<\/p>\n<\/li>\n<\/ol>\n<p>\u5728 URL \u4e2d\u63d0\u4f9b\u53c2\u6570\u4f3c\u4e4e\u662f API \u7684\u672c\u673a\uff0c\u56e0\u4e3a\u6211\u4eec\u5df2\u7ecf\u719f\u6089\u8fd9\u6837\u505a\u4e86\u3002\u56e0\u6b64\uff0c\u7528\u6237\u53ef\u4ee5\u901a\u8fc7\u4ee5\u4e0b\u65b9\u5f0f\u68c0\u7d22\u5c5e\u4e8e\u7279\u5b9a\u7528\u6237\u7684\u4e00\u7ec4\u5e16\u5b50\uff1a<\/p>\n<pre>https:\/\/127.0.0.1:8080\/#\/posts?author=1\n<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n<p>\u4e0a\u8ff0\u529f\u80fd\u53ef\u4ee5\u901a\u8fc7AngularJS\u63d0\u4f9b\u7684$routeParams\u670d\u52a1\u6765\u5b9e\u73b0\u3002\u6211\u4eec\u53ef\u4ee5\u5728\u6b64\u5904\u8bbf\u95ee\u7528\u6237\u5728 URL \u4e2d\u63d0\u4f9b\u7684\u53c2\u6570\u3002\u6211\u4eec\u5728\u672c\u7cfb\u5217\u7684\u524d\u4e00\u90e8\u5206\u4e2d\u6ce8\u518c\u8def\u7531\u65f6\u5df2\u7ecf\u7814\u7a76\u8fc7\u5b83\u3002<\/p>\n<\/p>\n<p>\u81f3\u4e8e\u76f4\u63a5\u5411\u6307\u4ee4\u63d0\u4f9b\u53c2\u6570\u4f5c\u4e3a\u5c5e\u6027\u503c\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u5982\u4e0b\u5185\u5bb9\uff1a<\/p>\n<pre>&lt;post-listing post-args=\"{author=1}\"&gt;&lt;\/post-listing&gt;<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n<p>\u4e0a\u9762\u4ee3\u7801\u7247\u6bb5\u4e2d\u7684 post-args \u5c5e\u6027\u91c7\u7528\u53c2\u6570\u6765\u68c0\u7d22\u4e00\u7ec4\u7279\u5b9a\u7684\u5e16\u5b50\uff0c\u76ee\u524d\u5b83\u91c7\u7528\u4f5c\u8005 ID\u3002\u6b64\u5c5e\u6027\u53ef\u4ee5\u91c7\u7528\u4efb\u610f\u6570\u91cf\u7684\u53c2\u6570\u6765\u68c0\u7d22 \/wp\/v2\/posts \u8def\u7531\u652f\u6301\u7684\u5e16\u5b50\u3002\u56e0\u6b64\uff0c\u5982\u679c\u6211\u4eec\u8981\u68c0\u7d22\u7531 ID \u4e3a 1 \u4e14\u5c5e\u4e8e ID 10 \u7c7b\u522b\u7684\u7528\u6237\u64b0\u5199\u7684\u4e00\u7ec4\u5e16\u5b50\uff0c\u6211\u4eec\u53ef\u4ee5\u6267\u884c\u5982\u4e0b\u64cd\u4f5c\uff1a<\/p>\n<pre>&lt;post-listing post-args=\"{author=1, filter[cat]=10}\"&gt;&lt;\/post-listing&gt;<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n<p>\u4e0a\u8ff0\u4ee3\u7801\u4e2d\u7684 filter[cat] \u53c2\u6570\u7528\u4e8e\u68c0\u7d22\u5c5e\u4e8e\u67d0\u4e2a\u7c7b\u522b\u7684\u4e00\u7ec4\u5e16\u5b50\u3002<\/p>\n<\/p>\n<p>\u5206\u9875\u4e5f\u662f\u4f7f\u7528\u5e16\u5b50\u5217\u8868\u9875\u9762\u65f6\u7684\u4e00\u4e2a\u57fa\u672c\u529f\u80fd\u3002\u8be5\u6307\u4ee4\u5c06\u5904\u7406\u540e\u5206\u9875\uff0c\u5e76\u4e14\u6b64\u529f\u80fd\u5c06\u7531\u670d\u52a1\u5668\u8fd4\u56de\u7684 X-WP-Total \u548c X-WP-TotalPages \u6807\u5934\u7684\u503c\u9a71\u52a8\u4e0e\u54cd\u5e94\u4e3b\u4f53\u3002\u56e0\u6b64\uff0c\u7528\u6237\u5c06\u80fd\u591f\u5728\u4e0a\u4e00\u7ec4\u5e16\u5b50\u548c\u4e0b\u4e00\u7ec4\u5e16\u5b50\u4e4b\u95f4\u6765\u56de\u5bfc\u822a\u3002<\/p>\n<p>\u786e\u5b9a\u4e86\u7528\u4e8e\u53d1\u5e03\u5217\u8868\u7684\u81ea\u5b9a\u4e49\u6307\u4ee4\u7684\u5b9e\u8d28\u5185\u5bb9\u540e\uff0c\u6211\u4eec\u73b0\u5728\u5df2\u7ecf\u6709\u4e86\u76f8\u5f53\u575a\u5b9e\u7684\u57fa\u7840\u6765\u5f00\u59cb\u7f16\u5199\u4ee3\u7801\u3002<\/p>\n<\/p>\n<h2>\u4e3a\u5e16\u5b50\u5217\u8868\u6784\u5efa\u81ea\u5b9a\u4e49\u6307\u4ee4<\/h2>\n<\/p>\n<p>\u4e3a\u5e16\u5b50\u5217\u8868\u529f\u80fd\u6784\u5efa\u6307\u4ee4\u5305\u62ec\u4e24\u4e2a\u6b65\u9aa4\uff1a<\/p>\n<\/p>\n<ol>\n<li>\u521b\u5efa\u7528\u4e8e\u68c0\u7d22\u5e16\u5b50\u548c\u5904\u7406\u5176\u4ed6\u5185\u5bb9\u7684\u4e1a\u52a1\u903b\u8f91\u3002<\/li>\n<li>\u4e3a\u8fd9\u4e9b\u5e16\u5b50\u521b\u5efa\u4e00\u4e2a\u6e32\u67d3\u89c6\u56fe\u4ee5\u663e\u793a\u5728\u9875\u9762\u4e0a\u3002\n<\/p>\n<\/li>\n<\/ol>\n<p>\u6211\u4eec\u7684\u81ea\u5b9a\u4e49\u6307\u4ee4\u7684\u4e1a\u52a1\u903b\u8f91\u5c06\u5728\u6307\u4ee4\u58f0\u660e\u4e2d\u5904\u7406\u3002\u4e3a\u4e86\u5728 DOM \u4e0a\u5448\u73b0\u6570\u636e\uff0c\u6211\u4eec\u5c06\u521b\u5efa\u4e00\u4e2a\u7528\u4e8e\u5217\u51fa\u5e16\u5b50\u7684\u81ea\u5b9a\u4e49\u6a21\u677f\u3002\u8ba9\u6211\u4eec\u4ece\u6307\u4ee4\u58f0\u660e\u5f00\u59cb\u3002<\/p>\n<\/p>\n<h3>\u6307\u4ee4\u58f0\u660e<\/h3>\n<\/p>\n<p>AngularJS \u4e2d\u7684\u6307\u4ee4\u53ef\u4ee5\u4f7f\u7528\u4ee5\u4e0b\u8bed\u6cd5\u4e3a\u6a21\u5757\u58f0\u660e\uff1a<\/p>\n<pre>\/**\n * Creating a custom directive for posts listing\n *\/\nquiescentApp.directive( 'postListing', [function() {\n    return {\n\n    };\n}] );\n<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n<p>\u5728\u8fd9\u91cc\uff0c\u6211\u4eec\u4f7f\u7528\u6a21\u5757\u4e2d\u53ef\u7528\u7684 .directive() \u65b9\u6cd5\u5728\u6a21\u5757\u4e0a\u58f0\u660e\u6307\u4ee4\u3002\u8be5\u65b9\u6cd5\u5c06\u6307\u4ee4\u7684\u540d\u79f0\u4f5c\u4e3a\u7b2c\u4e00\u4e2a\u53c2\u6570\uff0c\u5e76\u4e14\u8be5\u540d\u79f0\u4e0e\u5143\u7d20\u6807\u7b7e\u7684\u540d\u79f0\u5bc6\u5207\u76f8\u5173\u3002\u7531\u4e8e\u6211\u4eec\u5e0c\u671b HTML \u5143\u7d20\u4e3a &lt;post-listing&gt;&lt;\/post-listing&gt;\uff0c\u56e0\u6b64\u6211\u4eec\u63d0\u4f9b\u4e86\u6807\u7b7e\u540d\u79f0\u7684\u9a7c\u5cf0\u5f0f\u8868\u793a\u5f62\u5f0f\u3002\u60a8\u53ef\u4ee5\u5728\u5b98\u65b9\u6587\u6863\u4e2d\u4e86\u89e3\u6709\u5173 AngularJS \u6267\u884c\u7684\u89c4\u8303\u5316\u8fc7\u7a0b\u4ee5\u5339\u914d\u6307\u4ee4\u540d\u79f0\u7684\u66f4\u591a\u4fe1\u606f\u3002<\/p>\n<\/p>\n<p>\u6211\u4eec\u5728\u4e0a\u9762\u7684\u4ee3\u7801\u4e2d\u4f7f\u7528\u7684\u7528\u4e8e\u58f0\u660e\u6307\u4ee4\u7684\u7b26\u53f7\u79f0\u4e3a<em>\u5b89\u5168\u6837\u5f0f\u7684\u4f9d\u8d56\u6ce8\u5165<\/em>\u3002\u5728\u8fd9\u79cd\u8868\u793a\u6cd5\u4e2d\uff0c\u6211\u4eec\u63d0\u4f9b\u4e86\u4e00\u4e2a\u4f9d\u8d56\u9879\u6570\u7ec4\u4f5c\u4e3a\u6307\u4ee4\u6240\u9700\u7684\u7b2c\u4e8c\u4e2a\u53c2\u6570\u3002\u76ee\u524d\uff0c\u6211\u4eec\u5c1a\u672a\u4e3a\u81ea\u5b9a\u4e49\u6307\u4ee4\u5b9a\u4e49\u4efb\u4f55\u4f9d\u8d56\u9879\u3002\u4f46\u7531\u4e8e\u6211\u4eec\u9700\u8981 Posts \u670d\u52a1\u6765\u68c0\u7d22\u5e16\u5b50\uff08\u6211\u4eec\u5728\u672c\u7cfb\u5217\u7684\u4e0a\u4e00\u90e8\u5206\u4e2d\u521b\u5efa\u7684\uff09\u4ee5\u53ca\u672c\u673a AngularJS \u7684 $routeParams \u548c $location\u670d\u52a1\u7528\u4e8e\u8bbf\u95eeURL\u53c2\u6570\u548c\u5f53\u524d\u8def\u5f84\uff0c\u6211\u4eec\u5b9a\u4e49\u5982\u4e0b\uff1a<\/p>\n<pre>\/**\n * Creating a custom directive for posts listing\n *\/\nquiescentApp.directive( 'postListing', ['$routeParams', '$location', 'Posts', function( $routeParams, $location, Posts ) {\n    return {\n        restrict: 'E',\n        scope: {\n            postArgs: '='\n        },\n        link: function( $scope, $elem, $attr ) {\n        \n        }\n    };\n}] );\n<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n<p>\u7136\u540e\uff0c\u8fd9\u4e9b\u4f9d\u8d56\u9879\u53ef\u4f9b\u5b9a\u4e49\u4e3a\u6570\u7ec4\u6700\u540e\u4e00\u4e2a\u5143\u7d20\u7684\u51fd\u6570\u4f7f\u7528\u3002\u8be5\u51fd\u6570\u8fd4\u56de\u4e00\u4e2a\u5305\u542b\u6307\u4ee4\u5b9a\u4e49\u7684\u5bf9\u8c61\u3002\u76ee\u524d\uff0c\u6211\u4eec\u5728\u6307\u4ee4\u5b9a\u4e49\u5bf9\u8c61\u4e2d\u6709\u4e24\u4e2a\u5c5e\u6027\uff0c\u5373 restrict \u548c link\u3002<\/p>\n<\/p>\n<p>restrict \u9009\u9879\u5b9a\u4e49\u4e86\u6211\u4eec\u5728\u4ee3\u7801\u4e2d\u4f7f\u7528\u6307\u4ee4\u7684\u65b9\u5f0f\uff0c\u8be5\u9009\u9879\u53ef\u4ee5\u6709\u56db\u4e2a\u53ef\u80fd\u7684\u503c\uff1a<\/p>\n<ol>\n<li> A\uff1a\u7528\u4e8e\u5c06\u6307\u4ee4\u7528\u4f5c\u73b0\u6709 HTML \u5143\u7d20\u7684\u5c5e\u6027\u3002<\/li>\n<li> E\uff1a\u7528\u4e8e\u4f7f\u7528\u6307\u4ee4\u4f5c\u4e3a\u5143\u7d20\u540d\u79f0\u3002\n<\/p>\n<\/li>\n<li> C\uff1a\u7528\u4e8e\u4f7f\u7528\u6307\u4ee4\u4f5c\u4e3a\u7c7b\u540d\u3002\n<\/p>\n<\/li>\n<li> M\uff1a\u7528\u4e8e\u5c06\u8be5\u6307\u4ee4\u7528\u4f5c HTML \u6ce8\u91ca\u3002\n<\/p>\n<\/li>\n<\/ol>\n<p>restrict \u9009\u9879\u4e5f\u53ef\u4ee5\u63a5\u53d7\u4e0a\u8ff0\u56db\u4e2a\u503c\u7684\u4efb\u610f\u7ec4\u5408\u3002<\/p>\n<\/p>\n<p>\u7531\u4e8e\u6211\u4eec\u5e0c\u671b\u6307\u4ee4\u6210\u4e3a\u65b0\u5143\u7d20 &lt;post-listing&gt;&lt;\/post-listing&gt;\uff0c\u56e0\u6b64\u6211\u4eec\u5c06\u9650\u5236\u9009\u9879\u8bbe\u7f6e\u4e3a E\u3002\u5982\u679c\u6211\u4eec\u8981\u4f7f\u7528\u9884\u5148\u5b58\u5728\u7684 HTML \u5143\u7d20\u4e0a\u7684\u5c5e\u6027\u6765\u5b9a\u4e49\u6307\u4ee4\uff0c\u90a3\u4e48\u6211\u4eec\u53ef\u4ee5\u5c06\u6b64\u9009\u9879\u8bbe\u7f6e\u4e3a A\u3002\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528 \u5728 HTML \u4ee3\u7801\u4e2d\u5b9a\u4e49\u8be5\u6307\u4ee4\u3002<\/p>\n<\/p>\n<p>\u7b2c\u4e8c\u4e2a scope \u5c5e\u6027\u7528\u4e8e\u4fee\u6539\u6307\u4ee4\u7684\u8303\u56f4\u3002\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c scope \u5c5e\u6027\u7684\u503c\u4e3a false\uff0c\u8fd9\u610f\u5473\u7740\u6307\u4ee4\u7684\u8303\u56f4\u4e0e\u5176\u7236\u7ea7\u7684\u8303\u56f4\u76f8\u540c\u3002\u5f53\u6211\u4eec\u5411\u5b83\u4f20\u9012\u4e00\u4e2a\u5bf9\u8c61\u65f6\uff0c\u4f1a\u4e3a\u8be5\u6307\u4ee4\u521b\u5efa\u4e00\u4e2a\u9694\u79bb\u7684\u8303\u56f4\uff0c\u5e76\u4e14\u9700\u8981\u7531\u5176\u7236\u7ea7\u4f20\u9012\u7ed9\u8be5\u6307\u4ee4\u7684\u4efb\u4f55\u6570\u636e\u90fd\u901a\u8fc7 HTML \u5c5e\u6027\u4f20\u9012\u3002\u8fd9\u5c31\u662f\u6211\u4eec\u5728\u4ee3\u7801\u4e2d\u6240\u505a\u7684\uff0c\u6211\u4eec\u4f7f\u7528\u7684\u5c5e\u6027\u662f post-args\uff0c\u5b83\u88ab\u6807\u51c6\u5316\u4e3a postArgs\u3002<\/p>\n<p> p&gt; <\/p>\n<p>scope \u5bf9\u8c61\u4e2d\u7684 postArgs \u5c5e\u6027\u53ef\u4ee5\u63a5\u53d7\u4ee5\u4e0b\u4e09\u4e2a\u503c\u4e2d\u7684\u4efb\u610f\u4e00\u4e2a\uff1a<\/p>\n<\/p>\n<ol>\n<li> =\uff1a\u8868\u793a\u4f20\u9012\u7ed9\u5c5e\u6027\u7684\u503c\u5c06\u88ab\u89c6\u4e3a\u5bf9\u8c61\u3002<\/li>\n<li> @\uff1a\u8fd9\u610f\u5473\u7740\u4f20\u9012\u5230\u5c5e\u6027\u7684\u503c\u5c06\u88ab\u89c6\u4e3a\u7eaf\u5b57\u7b26\u4e32\u3002\n<\/p>\n<\/li>\n<li> &amp;\uff1a\u8868\u793a\u4f20\u9012\u7ed9\u5c5e\u6027\u7684\u503c\u5c06\u88ab\u89c6\u4e3a\u51fd\u6570\u3002\n<\/p>\n<\/li>\n<\/ol>\n<p>\u7531\u4e8e\u6211\u4eec\u9009\u62e9\u4f7f\u7528 = \u503c\uff0c\u56e0\u6b64\u4f20\u9012\u5230 post-args \u5c5e\u6027\u7684\u4efb\u4f55\u503c\u90fd\u5c06\u88ab\u89c6\u4e3a JSON \u5bf9\u8c61\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u8be5\u5bf9\u8c61\u4f5c\u4e3a\u68c0\u7d22\u5e16\u5b50\u7684\u53c2\u6570\u3002<\/p>\n<\/p>\n<p>\u7b2c\u4e09\u4e2a\u5c5e\u6027 link \u7528\u4e8e\u5b9a\u4e49\u4e00\u4e2a\u51fd\u6570\uff0c\u8be5\u51fd\u6570\u7528\u4e8e\u64cd\u4f5c DOM \u5e76\u5b9a\u4e49\u8be5\u6307\u4ee4\u6240\u9700\u7684 API \u548c\u51fd\u6570\u3002\u8be5\u51fd\u6570\u662f\u5904\u7406\u6307\u4ee4\u6240\u6709\u903b\u8f91\u7684\u5730\u65b9\u3002<\/p>\n<\/p>\n<p>link \u51fd\u6570\u63a5\u53d7\u4f5c\u7528\u57df\u5bf9\u8c61\u3001\u6307\u4ee4\u7684 HTML \u5143\u7d20\u4ee5\u53ca\u6307\u4ee4\u7684 HTML \u5143\u7d20\u4e0a\u5b9a\u4e49\u7684\u5c5e\u6027\u7684\u5bf9\u8c61\u7684\u53c2\u6570\u3002\u76ee\u524d\uff0c\u6211\u4eec\u5206\u522b\u4e3a\u8303\u56f4\u5bf9\u8c61\u548c HTML \u5143\u7d20\u4f20\u9012\u4e24\u4e2a\u53c2\u6570 $scope \u548c $elem \u3002<\/p>\n<\/p>\n<p>\u8ba9\u6211\u4eec\u5728 $scope \u5c5e\u6027\u4e0a\u5b9a\u4e49\u4e00\u4e9b\u53d8\u91cf\uff0c\u6211\u4eec\u5c06\u4f7f\u7528\u8be5\u53d8\u91cf\u5728 DOM \u4e0a\u5448\u73b0\u5e16\u5b50\u5217\u8868\u529f\u80fd\u3002<\/p>\n<pre>\/**\n * Creating a custom directive for posts listing\n *\/\nquiescentApp.directive( 'postListing', ['$routeParams', '$location', 'Posts', function( $routeParams, $location, Posts ) {\n    return {\n        restrict: 'E',\n        scope: {\n            postArgs: '='\n        },\n        link: function( $scope, $elem, $attr ) {\n            \/\/ defining variables on the $scope object\n            $scope.posts = [];\n            $scope.postHeaders = {};\n            $scope.currentPage = $routeParams.page ? Math.abs( $routeParams.page ) : 1;\n            $scope.nextPage = null;\n            $scope.previousPage = null;\n            $scope.routeContext = $location.path();\n        }\n    };\n}] );\n<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n<p>\u56e0\u6b64\uff0c\u6211\u4eec\u5728 $scope \u5bf9\u8c61\u4e0a\u5b9a\u4e49\u4e86\u516d\u4e2a\u5c5e\u6027\uff0c\u6211\u4eec\u53ef\u4ee5\u5728 DOM \u4e2d\u8bbf\u95ee\u5b83\u4eec\u3002\u8fd9\u4e9b\u5c5e\u6027\u662f\uff1a<\/p>\n<\/p>\n<ol>\n<li> $posts\uff1a\u4fdd\u5b58\u670d\u52a1\u5668\u8fd4\u56de\u7684 post \u5bf9\u8c61\u7684\u6570\u7ec4\u3002<\/li>\n<li> $postHeaders\uff1a\u7528\u4e8e\u4fdd\u5b58\u670d\u52a1\u5668\u5c06\u4e0e\u54cd\u5e94\u6b63\u6587\u4e00\u8d77\u8fd4\u56de\u7684\u6807\u5934\u7684\u5bf9\u8c61\u3002\u6211\u4eec\u5c06\u4f7f\u7528\u5b83\u4eec\u6765\u5904\u7406\u5bfc\u822a\u3002\n<\/p>\n<\/li>\n<li> $currentPage\uff1a\u4fdd\u5b58\u5f53\u524d\u9875\u7801\u7684\u6574\u578b\u53d8\u91cf\u3002\n<\/p>\n<\/li>\n<li> $previousPage\uff1a\u4fdd\u5b58\u4e0a\u4e00\u9875\u9875\u7801\u7684\u53d8\u91cf\u3002\n<\/p>\n<\/li>\n<li> $nextPage\uff1a\u4fdd\u5b58\u4e0b\u4e00\u9875\u7f16\u53f7\u7684\u53d8\u91cf\u3002\n<\/p>\n<\/li>\n<li> $routeContext\uff1a\u7528\u4e8e\u4f7f\u7528 $location \u670d\u52a1\u8bbf\u95ee\u5f53\u524d\u8def\u5f84\u3002\n<\/p>\n<\/li>\n<\/ol>\n<p>\u6211\u4eec\u4e4b\u524d\u4e3a HTML \u5c5e\u6027\u5b9a\u4e49\u7684 postArgs \u5c5e\u6027\u5df2\u5728\u6307\u4ee4\u5185\u7684 $scope \u5bf9\u8c61\u4e0a\u53ef\u7528\u3002<\/p>\n<\/p>\n<p>\u73b0\u5728\u6211\u4eec\u51c6\u5907\u4f7f\u7528 Posts \u670d\u52a1\u5411\u670d\u52a1\u5668\u53d1\u51fa\u8bf7\u6c42\u4ee5\u68c0\u7d22\u5e16\u5b50\u3002\u4f46\u5728\u6b64\u4e4b\u524d\uff0c\u6211\u4eec\u5fc5\u987b\u8003\u8651\u7528\u6237\u4f5c\u4e3a URL \u53c2\u6570\u63d0\u4f9b\u7684\u53c2\u6570\u4ee5\u53ca post-args \u5c5e\u6027\u4e2d\u63d0\u4f9b\u7684\u53c2\u6570\u3002\u4e3a\u6b64\uff0c\u6211\u4eec\u5c06\u521b\u5efa\u4e00\u4e2a\u51fd\u6570\uff0c\u4f7f\u7528 $routeParams \u670d\u52a1\u6765\u63d0\u53d6 URL \u53c2\u6570\uff0c\u5e76\u5c06\u5b83\u4eec\u4e0e\u901a\u8fc7 post-args \u5c5e\u6027\u63d0\u4f9b\u7684\u53c2\u6570\u5408\u5e76\uff1a p&gt; <\/p>\n<pre>\/**\n * Creating a custom directive for posts listing\n *\/\nquiescentApp.directive( 'postListing', ['$routeParams', '$location', 'Posts', function( $routeParams, $location, Posts ) {\n    return {\n        restrict: 'E',\n        scope: {\n            postArgs: '='\n        },\n        link: function( $scope, $elem, $attr ) {\n            \/\/ defining variables on the $scope object\n            $scope.posts = [];\n            $scope.postHeaders = {};\n            $scope.currentPage = $routeParams.page ? Math.abs( $routeParams.page ) : 1;\n            $scope.nextPage = null;\n            $scope.previousPage = null;\n            $scope.routeContext = $location.path();\n            \n            \/\/ preparing query arguments\n            var prepareQueryArgs = function() {\n                var tempParams = $routeParams;\n                delete tempParams.id;\n                return angular.merge( {}, $scope.postArgs, tempParams );\n            };\n        }\n    };\n}] );\n<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n<p>\u4e0a\u8ff0\u4ee3\u7801\u4e2d\u7684 prepareQueryArgs() \u65b9\u6cd5\u4f7f\u7528 angular.merge() \u65b9\u6cd5\uff0c\u8be5\u65b9\u6cd5\u6269\u5c55\u4e86 $scope\u3002 postArgs \u5bf9\u8c61\u4e0e $routeParams \u5bf9\u8c61\u3002\u4f46\u5728\u5408\u5e76\u8fd9\u4e24\u4e2a\u5bf9\u8c61\u4e4b\u524d\uff0c\u5b83\u9996\u5148\u4f7f\u7528 delete \u8fd0\u7b97\u7b26\u4ece $routeParams \u5bf9\u8c61\u4e2d\u5220\u9664 id \u5c5e\u6027\u3002\u8fd9\u662f\u5fc5\u8981\u7684\uff0c\u56e0\u4e3a\u6211\u4eec\u5c06\u5728\u7c7b\u522b\u548c\u7528\u6237\u89c6\u56fe\u4e0a\u4f7f\u7528\u6b64\u6307\u4ee4\uff0c\u5e76\u4e14\u6211\u4eec\u4e0d\u5e0c\u671b\u7c7b\u522b\u548c\u7528\u6237 ID \u88ab\u9519\u8bef\u5730\u89e3\u91ca\u4e3a\u5e16\u5b50 ID\u3002<\/p>\n<\/p>\n<p>\u51c6\u5907\u597d\u67e5\u8be2\u53c2\u6570\u540e\uff0c\u6211\u4eec\u7ec8\u4e8e\u51c6\u5907\u597d\u8c03\u7528\u670d\u52a1\u5668\u5e76\u68c0\u7d22\u5e16\u5b50\uff0c\u6211\u4eec\u4f7f\u7528 Posts.query() \u65b9\u6cd5\u6765\u6267\u884c\u6b64\u64cd\u4f5c\uff0c\u8be5\u65b9\u6cd5\u91c7\u7528\u4e24\u4e2a\u53c2\u6570\uff1a <\/p>\n<ol>\n<li>\u5305\u542b\u7528\u4e8e\u8fdb\u884c\u67e5\u8be2\u7684\u53c2\u6570\u7684\u5bf9\u8c61\u3002<\/li>\n<li>\u67e5\u8be2\u5b8c\u6210\u540e\u6267\u884c\u7684\u56de\u8c03\u51fd\u6570\u3002\n<\/p>\n<\/li>\n<\/ol>\n<p>\u56e0\u6b64\uff0c\u6211\u4eec\u5c06\u4f7f\u7528 prepareQueryArgs() \u51fd\u6570\u4e3a\u67e5\u8be2\u53c2\u6570\u51c6\u5907\u4e00\u4e2a\u5bf9\u8c61\uff0c\u5e76\u5728\u56de\u8c03\u51fd\u6570\u4e2d\u8bbe\u7f6e \u4e0a\u67d0\u4e9b\u53d8\u91cf\u7684\u503c$scope \u5c5e\u6027\uff1a<\/p>\n<pre>\/\/ make the request and query posts\nPosts.query( prepareQueryArgs(), function( data, headers ) {\n    $scope.posts = data;\n    $scope.postHeaders = headers();\n    $scope.previousPage = ( ( $scope.currentPage + 1 ) &amp;gt; $scope.postHeaders['x-wp-totalpages'] ) ? null : ( $scope.currentPage + 1 );\n    $scope.nextPage = ( ( $scope.currentPage - 1 ) &amp;gt; 0 ) ? ( $scope.currentPage - 1 ) : null;\n});\n<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n<p>\u56de\u8c03\u51fd\u6570\u83b7\u53d6\u54cd\u5e94\u6b63\u6587\u548c\u54cd\u5e94\u6807\u5934\u7684\u4e24\u4e2a\u53c2\u6570\u3002\u8fd9\u4e9b\u5206\u522b\u7531 data \u548c headers \u53c2\u6570\u8868\u793a\u3002<\/p>\n<\/p>\n<p>headers \u53c2\u6570\u662f\u4e00\u4e2a\u51fd\u6570\uff0c\u5b83\u8fd4\u56de\u4e00\u4e2a\u5305\u542b\u670d\u52a1\u5668\u54cd\u5e94\u6807\u5934\u7684\u5bf9\u8c61\u3002<\/p>\n<p>\u5269\u4e0b\u7684\u4ee3\u7801\u975e\u5e38\u4e0d\u8a00\u81ea\u660e\uff0c\u56e0\u4e3a\u6211\u4eec\u6b63\u5728\u8bbe\u7f6e $scope.posts \u6570\u7ec4\u7684\u503c\u3002\u4e3a\u4e86\u8bbe\u7f6e $scope.previousPage \u548c $scope.nextPage \u53d8\u91cf\u7684\u503c\uff0c\u6211\u4eec\u4f7f\u7528 x-wp-totalpages \u5c5e\u6027postHeaders \u5bf9\u8c61\u3002<\/p>\n<\/p>\n<p>\u73b0\u5728\u6211\u4eec\u51c6\u5907\u4f7f\u7528\u6307\u4ee4\u7684\u81ea\u5b9a\u4e49\u6a21\u677f\u5728\u524d\u7aef\u6e32\u67d3\u8fd9\u4e9b\u6570\u636e\u3002<\/p>\n<\/p>\n<h2>\u4e3a\u6307\u4ee4\u521b\u5efa\u81ea\u5b9a\u4e49\u6a21\u677f<\/h2>\n<\/p>\n<p>\u4e3a\u4e86\u4f7f\u6211\u4eec\u7684\u6307\u4ee4\u53d1\u6325\u4f5c\u7528\uff0c\u6211\u4eec\u9700\u8981\u505a\u7684\u6700\u540e\u4e00\u4ef6\u4e8b\u662f\u4e3a\u5e16\u5b50\u5217\u8868\u5236\u4f5c\u4e00\u4e2a\u5355\u72ec\u7684\u6a21\u677f\u5e76\u5c06\u5176\u94fe\u63a5\u5230\u6307\u4ee4\u3002\u4e3a\u6b64\uff0c\u6211\u4eec\u9700\u8981\u4fee\u6539\u6307\u4ee4\u58f0\u660e\u5e76\u5305\u542b templateUrl \u5c5e\u6027\uff0c\u5982\u4e0b\u6240\u793a\uff1a<\/p>\n<pre>\/**\n * Creating a custom directive for posts listing\n *\/\nquiescentApp.directive( 'postListing', ['$routeParams', '$location', 'Posts', function( $routeParams, $location, Posts ) {\n    return {\n        restrict: 'E',\n        scope: {\n            postArgs: '='\n        },\n        templateUrl: 'views\/directive-post-listing.html',\n        link: function( $scope, $elem, $attr ) {\n        \n        }\n    };\n}] );\n<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n<p>\u4e0a\u9762\u4ee3\u7801\u4e2d\u7684 templateUrl \u5c5e\u6027\u5f15\u7528\u4e86 <strong>views<\/strong> \u76ee\u5f55\u4e2d\u540d\u4e3a <strong>directive-post-listing.html<\/strong> \u7684\u6587\u4ef6\u3002\u56e0\u6b64\uff0c\u5728 <strong>views<\/strong> \u6587\u4ef6\u5939\u4e2d\u521b\u5efa\u6b64\u6587\u4ef6\u5e76\u7c98\u8d34\u4ee5\u4e0b HTML \u4ee3\u7801\uff1a<\/p>\n<pre>&lt;!-- post listing starts --&gt;\n&lt;article class=\"post-entry\"&gt;&lt;h2 class=\"post-title\"&gt;&lt;a href=\"post-single.html\"&gt;Good design is a lot like clear thinking made visual.&lt;\/a&gt;&lt;\/h2&gt;\n    &lt;figure class=\"post-thumbnail\"&gt;&lt;img src=\"img\/img-712-348.jpg\" alt=\"Featured Image\"&gt;&lt;\/figure&gt;&lt;p class=\"post-meta\"&gt;\n        By &lt;a href=\"author.html\"&gt;Bilal Shahid&lt;\/a&gt; in &lt;a href=\"category.html\"&gt;Quotes&lt;\/a&gt;\n    &lt;\/p&gt;\n    &lt;div class=\"post-content\"&gt;\n        &lt;p&gt;Created days forth. Dominion. Subdue very hath spirit us sixth fish creepeth also. First meat one forth above. You'll Fill for. Can't evening one lights won't. Great of make firmament image. Life his beginning blessed lesser meat spirit blessed seas created green great beginning can't doesn't void moving. Subdue evening make spirit lesser greater all living green firmament winged saw tree one divide wherein divided shall dry very lesser saw, earth the. Light their the.&lt;\/p&gt;\n    &lt;\/div&gt;\n&lt;\/article&gt;&lt;!-- post listing ends --&gt;&lt;!-- pagination links start --&gt;&lt;div class=\"post-pagination\"&gt;\n    &lt;a href=\"#\" class=\"button\"&gt;Older Posts&lt;\/a&gt;\n    &lt;a href=\"#\" class=\"button\"&gt;Newer Posts&lt;\/a&gt;\n&lt;\/div&gt;\t\t\n&lt;!-- pagination links end --&gt;\n<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n<p>\u8fd9\u662f\u975e\u5e38\u57fa\u672c\u7684 HTML \u4ee3\u7801\uff0c\u8868\u793a\u5355\u4e2a\u5e16\u5b50\u6761\u76ee\u548c\u5e16\u5b50\u5206\u9875\u3002\u6211\u5df2\u4ece <strong>views\/listing.html<\/strong> \u6587\u4ef6\u4e2d\u590d\u5236\u4e86\u5b83\u3002\u6211\u4eec\u5c06\u4f7f\u7528\u4e00\u4e9b AngularJS \u6307\u4ee4\uff0c\u5305\u62ec ng-repeat\u3001ng-href\u3001ng-src \u548c ng -bind-html\uff0c\u663e\u793a\u5f53\u524d\u9a7b\u7559\u5728\u6307\u4ee4\u7684 $scope \u5c5e\u6027\u4e2d\u7684\u6570\u636e\u3002<\/p>\n<\/p>\n<p>\u5c06 HTML \u4ee3\u7801\u4fee\u6539\u4e3a\u4ee5\u4e0b\u5185\u5bb9\uff1a<\/p>\n<pre>&lt;!-- post listing starts --&gt;\n&lt;article class=\"post-entry\" ng-repeat=\"post in posts\"&gt;&lt;h2 class=\"post-title\"&gt;&lt;a ng-href=\"#\/posts\/{{post.slug}}\"&gt;{{post.title.rendered}}&lt;\/a&gt;&lt;\/h2&gt;\n    &lt;figure class=\"post-thumbnail\" ng-show=\"post.quiescent_featured_image\"&gt;&lt;img ng-src=\"{{post.quiescent_featured_image}}\" alt=\"Featured Image\"&gt;&lt;\/figure&gt;&lt;p class=\"post-meta\"&gt;\n        By &lt;a ng-href=\"#\/users\/{{post.author}}\"&gt;{{post.quiescent_author_name}}&lt;\/a&gt; \n        in &lt;a ng-href=\"#\/categories\/{{category.term_id}}\" ng-repeat=\"category in post.quiescent_categories\"&gt;{{category.name}}{{$last ? '' : ',&nbsp;'}}&lt;\/a&gt;\n    &lt;\/p&gt;\n    &lt;div class=\"post-content\" ng-bind-html=\"post.excerpt.rendered\"&gt;&lt;\/div&gt;\n    &lt;\/article&gt;&lt;!-- post listing ends --&gt;<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n<p>\u4e0a\u9762\u7684\u4ee3\u7801\u4f7f\u7528 ng-repeat \u6307\u4ee4\u6765\u8fed\u4ee3 $scope.posts \u6570\u7ec4\u3002\u6307\u4ee4\u58f0\u660e\u4e2d $scope \u5bf9\u8c61\u4e0a\u5b9a\u4e49\u7684\u4efb\u4f55\u5c5e\u6027\u90fd\u53ef\u4ee5\u76f4\u63a5\u5728\u6a21\u677f\u4e2d\u4f7f\u7528\u3002\u56e0\u6b64\uff0c\u6211\u4eec\u5728\u6a21\u677f\u4e2d\u5c06 $scope.posts \u6570\u7ec4\u76f4\u63a5\u5f15\u7528\u4e3a posts \u3002<\/p>\n<\/p>\n<p>\u901a\u8fc7\u4f7f\u7528 ng-repeat \u6307\u4ee4\uff0c\u6211\u4eec\u786e\u4fdd article.post-entry \u5bb9\u5668\u5c06\u5728 \u4e2d\u7684\u6bcf\u4e2a\u5e16\u5b50\u4e2d\u91cd\u590dposts \u6570\u7ec4\uff0c\u6bcf\u4e2a\u5e16\u5b50\u5728\u5185\u5faa\u73af\u4e2d\u88ab\u79f0\u4e3a post \u3002\u8fd9\u4e2a post \u5bf9\u8c61\u5305\u542b\u670d\u52a1\u5668\u8fd4\u56de\u7684 JSON \u683c\u5f0f\u7684\u6570\u636e\uff0c\u5305\u542b\u5e16\u5b50\u6807\u9898\u3001\u5e16\u5b50 ID\u3001\u5e16\u5b50\u5185\u5bb9\u548c\u7279\u8272\u56fe\u50cf\u94fe\u63a5\u7b49\u5c5e\u6027\uff0c\u8fd9\u662f\u540c\u4f34\u6dfb\u52a0\u7684\u9644\u52a0\u5b57\u6bb5\u63d2\u4ef6\u3002<\/p>\n<p>\u5728\u4e0b\u4e00\u6b65\u4e2d\uff0c\u6211\u4eec\u5c06\u5e16\u5b50\u6807\u9898\u3001\u5e16\u5b50\u94fe\u63a5\u548c\u7279\u8272\u56fe\u50cf\u94fe\u63a5\u7b49\u503c\u66ff\u6362\u4e3a post \u5bf9\u8c61\u4e2d\u7684\u5c5e\u6027\u3002<\/p>\n<\/p>\n<p>\u5bf9\u4e8e\u5206\u9875\uff0c\u5c06\u4e4b\u524d\u7684\u4ee3\u7801\u66ff\u6362\u4e3a\u4ee5\u4e0b\u4ee3\u7801\uff1a<\/p>\n<pre>&lt;!-- pagination links start --&gt;\n&lt;div class=\"post-pagination\"&gt;\n    &lt;a ng-href=\"#{{routeContext}}?page={{nextPage}}\" class=\"button\" ng-class=\"{'disabled': !nextPage}\"&gt;Newer Posts&lt;\/a&gt;\n    &lt;a ng-href=\"#{{routeContext}}?page={{previousPage}}\" class=\"button\" ng-class=\"{'disabled': !previousPage}\"&gt;Older Posts&lt;\/a&gt;\n&lt;\/div&gt;\t\t\n&lt;!-- pagination links end --&gt;\n<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n<p>\u6211\u4eec\u9996\u5148\u8bbf\u95ee\u6211\u4eec\u5728\u6307\u4ee4\u58f0\u660e\u4e2d\u5b9a\u4e49\u7684 routeContext \u5c5e\u6027\uff0c\u5e76\u4f7f\u7528 ?page= \u53c2\u6570\u4f5c\u4e3a\u540e\u7f00\uff0c\u5e76\u4f7f\u7528 nextPage \u548c previousPage \u53d8\u91cf\u7528\u4e8e\u5728\u5e16\u5b50\u4e4b\u95f4\u6765\u56de\u5bfc\u822a\u3002\u6211\u4eec\u8fd8\u68c0\u67e5\u4e0b\u4e00\u9875\u6216\u4e0a\u4e00\u9875\u94fe\u63a5\u662f\u5426\u4e0d\u662f null\uff0c\u5426\u5219\u6211\u4eec\u5c06 .disabled \u7c7b\u6dfb\u52a0\u5230 Zurb Foundation \u63d0\u4f9b\u7684\u6309\u94ae\u3002<\/p>\n<\/p>\n<p>\u73b0\u5728\u6211\u4eec\u5df2\u7ecf\u5b8c\u6210\u4e86\u8be5\u6307\u4ee4\uff0c\u662f\u65f6\u5019\u5bf9\u5176\u8fdb\u884c\u6d4b\u8bd5\u4e86\u3002\u6211\u4eec\u901a\u8fc7\u5728 HTML \u4e2d\u653e\u7f6e\u4e00\u4e2a &lt;post-listing&gt;&lt;\/post-listing&gt; \u6807\u7b7e\u6765\u5b9e\u73b0\u8fd9\u4e00\u70b9\uff0c\u6700\u597d\u4f4d\u4e8e <\/p>\n<p>  \u7684\u4e0a\u65b9\u6807\u7b7e\u3002\u8fd9\u6837\u505a\u610f\u5473\u7740\u5e16\u5b50\u5217\u8868\u5c06\u51fa\u73b0\u5728\u9875\u811a\u4e0a\u65b9\u3002\u4e0d\u8981\u62c5\u5fc3\u683c\u5f0f\u548c\u6837\u5f0f\uff0c\u6211\u4eec\u5c06\u5728\u672c\u7cfb\u5217\u7684\u4e0b\u4e00\u90e8\u5206\u4e2d\u5904\u7406\u5b83\u4eec\u3002 <\/p>\n<p>\u8fd9\u5c31\u662f\u4e3a\u5e16\u5b50\u5217\u8868\u529f\u80fd\u521b\u5efa\u81ea\u5b9a\u4e49 AngularJS \u6307\u4ee4\u7684\u8fc7\u7a0b\u3002<\/p>\n<\/p>\n<h2>\u63a5\u4e0b\u6765\u4f1a\u53d1\u751f\u4ec0\u4e48\uff1f<\/h2>\n<\/p>\n<p>\u5728\u6709\u5173\u4f7f\u7528 WP REST API \u548c AngularJS \u521b\u5efa\u524d\u7aef\u7684\u7cfb\u5217\u7684\u5f53\u524d\u90e8\u5206\u4e2d\uff0c\u6211\u4eec\u4e3a\u5e16\u5b50\u5217\u8868\u529f\u80fd\u6784\u5efa\u4e86\u4e00\u4e2a\u81ea\u5b9a\u4e49 AngularJS \u6307\u4ee4\u3002\u8be5\u6307\u4ee4\u4f7f\u7528\u6211\u4eec\u5728\u672c\u7cfb\u5217\u524d\u9762\u90e8\u5206\u521b\u5efa\u7684 Posts \u670d\u52a1\u3002\u8be5\u6307\u4ee4\u8fd8\u4ee5 HTML \u5c5e\u6027\u548c URL \u53c2\u6570\u7684\u5f62\u5f0f\u83b7\u53d6\u7528\u6237\u8f93\u5165\u3002<\/p>\n<\/p>\n<p>\u5728\u672c\u7cfb\u5217\u7684\u6700\u540e\u90e8\u5206\uff0c\u6211\u4eec\u5c06\u5f00\u59cb\u7814\u7a76\u9879\u76ee\u7684\u6700\u540e\u4e00\u90e8\u5206\uff0c\u5373\u5e16\u5b50\u3001\u7528\u6237\u548c\u7c7b\u522b\u7684\u63a7\u5236\u5668\u53ca\u5176\u5404\u81ea\u7684\u6a21\u677f\u3002<\/p>\n<\/p>\n<p>\u4ee5\u4e0a\u5c31\u662fCreating a Custom Directive for WordPress Post Listing on the Front End\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5728\u672c\u7cfb\u5217\u7684\u524d\u4e00\u90e8\u5206\u4e2d\uff0c\u6211\u4eec\u5f15\u5bfc\u4e86 AngularJS \u5e94\u7528\u7a0b\u5e8f\uff0c\u4e3a\u4e0d\u540c\u89c6\u56fe\u914d\u7f6e\u4e86\u8def\u7531\uff0c\u5e76\u56f4\u7ed5\u5e16\u5b50\u3001\u7528\u6237\u548c\u7c7b\u522b\u7684\u8def\u7531\u6784\u5efa\u4e86\u670d\u52a1\u3002\u4f7f\u7528\u8fd9\u4e9b\u670d\u52a1\uff0c\u6211\u4eec\u73b0\u5728\u7ec8\u4e8e\u80fd\u591f\u4ece\u670d\u52a1\u5668\u83b7\u53d6\u6570\u636e\u6765\u4e3a\u524d\u7aef\u63d0\u4f9b\u52a8\u529b\u3002 \u5728\u672c\u7cfb\u5217\u7684\u8fd9\u4e00\u90e8\u5206\u4e2d\uff0c\u6211\u4eec\u5c06\u81f4\u529b\u4e8e\u4e3a\u5e16\u5b50\u5217\u8868\u529f\u80fd\u6784\u5efa\u81ea\u5b9a\u4e49 AngularJS \u6307\u4ee4\u3002\u5728\u672c\u7cfb\u5217\u7684\u5f53\u524d\u90e8\u5206\u4e2d\uff0c\u6211\u4eec\u5c06\uff1a \u4ecb\u7ecd AngularJS \u6307\u4ee4\u4ee5\u53ca\u4e3a\u4ec0\u4e48\u6211\u4eec\u5e94\u8be5\u521b\u5efa\u4e00\u4e2a \u89c4\u5212\u5e16\u5b50\u5217\u8868\u529f\u80fd\u7684\u6307\u4ee4\u53ca\u5176\u6240\u9700\u7684\u53c2\u6570 \u4e3a\u5e16\u5b50\u5217\u8868\u521b\u5efa\u81ea\u5b9a\u4e49 AngularJS \u6307\u4ee4\u53ca\u5176\u6a21\u677f \u6240\u4ee5\u8ba9\u6211\u4eec\u9996\u5148\u4ecb\u7ecd\u4e00\u4e0b AngularJS \u6307\u4ee4\u4ee5\u53ca\u4e3a\u4ec0\u4e48\u6211\u4eec\u9700\u8981\u5b83\u4eec\u3002 AngularJS \u6307\u4ee4\u7b80\u4ecb AngularJS \u4e2d\u7684\u6307\u4ee4\u662f\u4e00\u79cd\u4fee\u6539 HTML \u5143\u7d20\u884c\u4e3a\u548c\u91cd\u7528\u53ef\u91cd\u590d\u4ee3\u7801\u5757\u7684\u65b9\u6cd5\u3002\u5b83\u4eec\u53ef\u7528\u4e8e\u4fee\u6539 HTML \u5143\u7d20\u53ca\u5176\u5b50\u5143\u7d20\u7684\u7ed3\u6784\uff0c\u56e0\u6b64\u5b83\u4eec\u662f\u5f15\u5165\u81ea\u5b9a\u4e49 UI \u5c0f\u90e8\u4ef6\u7684\u5b8c\u7f8e\u65b9\u5f0f\u3002 \u5728\u5206\u6790\u672c\u7cfb\u5217\u7b2c\u4e00\u90e8\u5206\u4e2d\u7684\u7ebf\u6846\u56fe\u65f6\uff0c\u6211\u4eec\u6ce8\u610f\u5230\u5e16\u5b50\u5217\u8868\u529f\u80fd\u5728\u4e09\u4e2a\u89c6\u56fe\u4e2d\u4f7f\u7528\uff0c\u5373\uff1a \u53d1\u5e03\u5217\u8868 \u4f5c\u8005\u7b80\u4ecb \u7c7b\u522b\u5e16\u5b50\u5217\u8868 \u56e0\u6b64\uff0c\u6211\u4eec\u53ef\u4ee5\u521b\u5efa\u4e00\u4e2a\u81ea\u5b9a\u4e49 AngularJS \u6307\u4ee4\uff0c\u5176\u4e2d\u5305\u542b\u4f7f\u7528\u6211\u4eec\u5728\u672c\u7cfb\u5217\u524d\u9762\u90e8\u5206\u521b\u5efa\u7684\u670d\u52a1\u6765\u68c0\u7d22\u5e16\u5b50\u7684\u4e1a\u52a1\u903b\u8f91\uff0c\u800c\u4e0d\u662f\u7f16\u5199\u5355\u72ec\u7684\u529f\u80fd\u6765\u5217\u51fa\u8fd9\u4e09\u4e2a\u9875\u9762\u4e0a\u7684\u5e16\u5b50\u3002\u9664\u4e86\u4e1a\u52a1\u903b\u8f91\u4e4b\u5916\uff0c\u8be5\u6307\u4ee4\u8fd8\u5c06\u5305\u542b\u5728\u67d0\u4e9b\u89c6\u56fe\u4e0a\u5217\u51fa\u5e16\u5b50\u7684\u6e32\u67d3\u903b\u8f91\u3002\u4e5f\u5728\u8be5\u6307\u4ee4\u4e2d\u5b9a\u4e49\u4e86\u5e16\u5b50\u5206\u9875\u548c\u6839\u636e\u67d0\u4e9b\u6761\u4ef6\u68c0\u7d22\u5e16\u5b50\u7684\u529f\u80fd\u3002 \u56e0\u6b64\uff0c\u4e3a\u5e16\u5b50\u5217\u8868\u529f\u80fd\u521b\u5efa\u81ea\u5b9a\u4e49 AngularJS \u6307\u4ee4\u5141\u8bb8\u6211\u4eec\u4ec5\u5728\u4e00\u4e2a\u4f4d\u7f6e\u5b9a\u4e49\u8be5\u529f\u80fd\uff0c\u8fd9\u5c06\u4f7f\u6211\u4eec\u5c06\u6765\u66f4\u5bb9\u6613\u6269\u5c55\u6216\u4fee\u6539\u6b64\u529f\u80fd\uff0c\u800c\u65e0\u9700\u66f4\u6539\u5176\u4e2d\u7684\u4ee3\u7801\u4f7f\u7528\u5b83\u7684\u6240\u6709\u4e09\u4e2a\u5b9e\u4f8b\u3002 \u8bdd\u867d\u5982\u6b64\uff0c\u8ba9\u6211\u4eec\u5f00\u59cb\u4e3a\u5e16\u5b50\u5217\u8868\u529f\u80fd\u7f16\u5199\u81ea\u5b9a\u4e49\u6307\u4ee4\u3002 \u89c4\u5212\u5e16\u5b50\u5217\u8868\u7684\u81ea\u5b9a\u4e49 AngularJS \u6307\u4ee4 \u5728\u6211\u4eec\u5f00\u59cb\u7f16\u5199\u7528\u4e8e\u6784\u5efa\u5e16\u5b50\u5217\u8868\u529f\u80fd\u6307\u4ee4\u7684\u4efb\u4f55\u4ee3\u7801\u4e4b\u524d\uff0c\u8ba9\u6211\u4eec\u5206\u6790\u4e00\u4e0b\u6307\u4ee4\u4e2d\u6240\u9700\u7684\u529f\u80fd\u3002 \u5728\u6700\u57fa\u672c\u7684\u5c42\u9762\u4e0a\uff0c\u6211\u4eec\u9700\u8981\u4e00\u4e2a\u53ef\u4ee5\u5728\u5e16\u5b50\u5217\u8868\u3001\u4f5c\u8005\u4e2a\u4eba\u8d44\u6599\u548c\u7c7b\u522b\u9875\u9762\u7684\u89c6\u56fe\u4e0a\u4f7f\u7528\u7684\u6307\u4ee4\u3002\u8fd9\u610f\u5473\u7740\u6211\u4eec\u5c06\u521b\u5efa\u4e00\u4e2a\u653e\u7f6e\u5728 HTML \u4e2d\u7684\u81ea\u5b9a\u4e49 UI \u5c0f\u90e8\u4ef6\uff08\u6216 DOM \u6807\u8bb0\uff09\uff0cAngularJS \u5c06\u6839\u636e\u6211\u4eec\u4e3a\u6307\u4ee4\u7684\u7279\u5b9a\u5b9e\u4f8b\u63d0\u4f9b\u7684\u9009\u9879\u6765\u5904\u7406\u5176\u4f59\u7684\u4e8b\u60c5\u3002 \u56e0\u6b64\uff0c\u6211\u4eec\u5c06\u521b\u5efa\u4e00\u4e2a\u7531\u4ee5\u4e0b\u6807\u8bb0\u6807\u8bc6\u7684\u81ea\u5b9a\u4e49 UI \u5c0f\u90e8\u4ef6\uff1a &lt;post-listing&gt;&lt;\/post-listing&gt; \u767b\u5f55\u540e\u590d\u5236 \u4f46\u662f\u6211\u4eec\u8fd8\u9700\u8981\u8fd9\u4e2a\u6307\u4ee4\u662f\u7075\u6d3b\u7684\uff0c\u5373\u5c06\u53c2\u6570\u4f5c\u4e3a\u8f93\u5165\u5e76\u91c7\u53d6\u76f8\u5e94\u7684\u884c\u52a8\u3002\u8003\u8651\u7528\u6237\u4e2a\u4eba\u8d44\u6599\u9875\u9762\uff0c\u6211\u4eec\u53ea\u5e0c\u671b\u663e\u793a\u5c5e\u4e8e\u8be5\u7279\u5b9a\u7528\u6237\u7684\u5e16\u5b50\uff0c\u6216\u8005\u7c7b\u522b\u9875\u9762\uff0c\u5176\u4e2d\u5c06\u5217\u51fa\u5c5e\u4e8e\u8be5\u7c7b\u522b\u7684\u5e16\u5b50\u3002\u8fd9\u4e9b\u53c2\u6570\u53ef\u4ee5\u901a\u8fc7\u4ee5\u4e0b\u4e24\u79cd\u65b9\u5f0f\u63d0\u4f9b\uff1a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-32361","post","type-post","status-publish","format-standard","hentry","category-cms"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/32361","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=32361"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/32361\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=32361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=32361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=32361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}