{"id":108,"date":"2020-08-28T01:07:22","date_gmt":"2020-08-28T01:07:22","guid":{"rendered":"http:\/\/blog.izziweb.com\/?p=108"},"modified":"2020-08-28T01:07:22","modified_gmt":"2020-08-28T01:07:22","slug":"angularjs-part3-%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b9%83%e0%b8%8a%e0%b9%89%e0%b8%87%e0%b8%b2%e0%b8%99%e0%b8%88%e0%b8%a3%e0%b8%b4%e0%b8%87","status":"publish","type":"post","link":"https:\/\/www.izziweb.com\/blog\/2020\/08\/28\/angularjs-part3-%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b9%83%e0%b8%8a%e0%b9%89%e0%b8%87%e0%b8%b2%e0%b8%99%e0%b8%88%e0%b8%a3%e0%b8%b4%e0%b8%87\/","title":{"rendered":"AngularJS part:3 \u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e08\u0e23\u0e34\u0e07"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e42\u0e1b\u0e23\u0e41\u0e01\u0e23\u0e21\u0e44\u0e21\u0e48\u0e04\u0e27\u0e23\u0e15\u0e49\u0e2d\u0e07\u0e40\u0e02\u0e35\u0e22\u0e19\u0e07\u0e32\u0e19\u0e0b\u0e49\u0e33\u0e46 \u0e41\u0e15\u0e48\u0e04\u0e27\u0e23\u0e40\u0e1b\u0e47\u0e19\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49 module \u0e2b\u0e23\u0e37\u0e2d function \u0e01\u0e25\u0e32\u0e07\u0e17\u0e35\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e19\u0e33\u0e01\u0e25\u0e31\u0e1a\u0e21\u0e32\u0e43\u0e0a\u0e49\u0e43\u0e2b\u0e21\u0e48\u0e44\u0e14\u0e49 \u0e09\u0e30\u0e19\u0e31\u0e49\u0e19 \u0e01\u0e32\u0e23\u0e41\u0e22\u0e01\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e43\u0e2b\u0e49\u0e40\u0e1b\u0e47\u0e19\u0e2d\u0e34\u0e2a\u0e23\u0e30\u0e15\u0e48\u0e2d\u0e01\u0e31\u0e19\u0e08\u0e36\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e34\u0e48\u0e07\u0e17\u0e35\u0e48\u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e21\u0e32\u0e01<br>\u0e04\u0e23\u0e32\u0e27\u0e19\u0e35\u0e49\u0e40\u0e23\u0e32\u0e21\u0e32\u0e25\u0e2d\u0e07\u0e14\u0e39\u0e27\u0e48\u0e32 AngularJS \u0e17\u0e33\u0e41\u0e1a\u0e1a\u0e19\u0e31\u0e49\u0e19\u0e44\u0e14\u0e49\u0e2b\u0e23\u0e37\u0e2d\u0e44\u0e21\u0e48<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"wp-block-paragraph\">file: testAngularJS.html<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"en-US\">\n&lt;head>\n&lt;script src=\"..\/..\/angular-1.8.0\/angular.js\">&lt;\/script>\n&lt;\/head>\n\n&lt;body>\n&lt;div id=\"myApp\">\n\t&lt;form id='f1'>\n\t\t&lt;div data-ng-controller=\"myCtrl\">\n\t\t\t&lt;my-directive>&lt;\/my-directive>\n\t\t&lt;\/div>\n\t\t&lt;div data-ng-controller=\"myCtrl\">\n\t\t\t&lt;my-directive data-ng-init='alldatas = &#91;\n\t\t\t\t{ type: \"text\", show:\"text 2\", id:\"id3\", value:\"1\", ref:\"ref3\" },\n\t\t\t\t{ type: \"number\", show:\"text 3\", id:\"id4\", value:2, ref:\"ref4\" },\n\t\t\t];'>&lt;\/my-directive>\n\t\t\t\n\t\t&lt;\/div>\n\t\t&lt;my-directive-submit data-ng-init='formID=\"f1\";'>&lt;\/my-directive-submit>\n\t&lt;\/form>\n&lt;\/div>\n\n&lt;\/body>\n&lt;\/html>\n\n&lt;script>\n\nfunction myCtrl($scope) {\n\t\/\/$scope.init = function(){}; \/\/\u0e23\u0e30\u0e27\u0e31\u0e07\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07\u0e04\u0e48\u0e32 data-ng-init\n};\nfunction myDirective() {\n\treturn {\n\t\ttemplate: \n\t\t\t'&lt;div data-ng-repeat=\"(mainKey,datas) in alldatas\" data-ng-switch on=\"datas.type\">'+\n\t\t\t\n\t\t\t\t'&lt;label for=\"{{datas.id}}\">{{datas.show}}&lt;\/label>'+\n\t\t\t\t\n\t\t\t\t'&lt;input data-ng-switch-when=\"number\" type=\"number\" id=\"{{datas.id}}\" name=\"{{datas.id}}\" data-ng-model=\"datas.value\" data-ng-value=\"datas.value\" refA=\"{{datas.ref}}\" \/>'+\n\t\t\t\t\n\t\t\t\t'&lt;textarea data-ng-switch-when=\"textarea\" id=\"{{datas.id}}\" name=\"{{datas.id}}\" data-ng-model=\"datas.value\" refA=\"{{datas.ref}}\">{{datas.value}}&lt;\/textarea>'+\n\t\t\t\t\n\t\t\t\t'&lt;input data-ng-switch-default type=\"text\" id=\"{{datas.id}}\" name=\"{{datas.id}}\" data-ng-model=\"datas.value\" data-ng-value=\"datas.value\" refA=\"{{datas.ref}}\" data-ng-click=\"functionB($event)\" style=\"border: 2px solid red;\" \/>'+\n\t\t\t\n\t\t\t'&lt;\/div>'\n\t\t,\n\t\tcontroller: function($scope, $element) {\n\t\t\t$scope.alldatas = &#91;\n\t\t\t\t{ type: 'text', show:'text 1', id:'id1', value:1, ref:'ref1' },\n\t\t\t\t{ type: 'textarea', show:'text area 1', id:'id2', value:'abc', ref:'ref2' },\n\t\t\t];\n\t\t\t\/\/\n\t\t\t$scope.functionB = function(event){\n\t\t\t\tconst val1 = angular.element(event.target).attr('refA');\n\t\t\t\t\/\/event.target.getAttribute('refA'); \/\/ok\n\t\t\t\t\/\/angular.element(event).attr('refA'); \/\/error\n\t\t\t\tconsole.log( val1 );\n\t\t\t};\n\t\t}\n\t};\n};\n\nfunction myDirectiveSubmit() {\n\treturn {\n\t\ttemplate: '&lt;input type=\"button\" value=\"submit\" data-ng-click=\"funcSubmit()\" {(cont)?true:false} \/>',\n\t\tlink: {\n\t\t\tpre: function(scope, element, attrs, ctrl) {\n\t\t\t\t\/\/scope.init here \/\/call right before render.\n\t\t\t},\n\t\t},\n\t\tcontroller: function($scope, $element) {\n\t\t\t\/\/\n\t\t\t$scope.funcSubmit = function() { \n\t\t\t\tconst myFormData = document.getElementById( $scope.formID ) ;\n\t\t\t\tconst postdata = new FormData( myFormData );\n\t\t\t\t\/\/ ajax\n\t\t\t\t$http({\n\t\t\t\t\tmethod: 'POST',\n\t\t\t\t\turl: \"\" ,\n\t\t\t\t\tdata: postdata,\n\t\t\t\t\theaders: { 'Content-Type': undefined },\n\t\t\t\t\ttransformRequest: angular.identity\n\t\t\t\t})\n\t\t\t\t.then(function(response) {\n\t\t\t\t\t\/\/success\n\t\t\t\t}, function(response) {\n\t\t\t\t\t\/\/error\n\t\t\t\t});\n\t\t\t};\n\t\t\t\/\/\n\t\t}\n\t};\n};\n\nvar myapp = angular.module('myApp', &#91;]);\nmyapp.controller('myCtrl', myCtrl);\nmyapp.directive('myDirective', myDirective);\nmyapp.directive('myDirectiveSubmit', myDirectiveSubmit);\n\n\/\/bootstrap\nangular.element(document).ready(function() {\n\tif( document.getElementById('myApp') ) {\n\t\tangular.bootstrap(document.getElementById('myApp'),&#91;'myApp']);\n\t}\n});\n&lt;\/script><\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\"><li>\u0e1c\u0e21\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19 data-ng-app \u0e40\u0e1b\u0e47\u0e19 id \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1c\u0e21\u0e08\u0e30\u0e44\u0e14\u0e49\u0e43\u0e0a\u0e49 angular.bootstrap \u0e43\u0e19\u0e2a\u0e48\u0e27\u0e19 script \u0e15\u0e2d\u0e19\u0e17\u0e49\u0e32\u0e22 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1c\u0e21\u0e08\u0e30\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e44\u0e14\u0e49\u0e21\u0e32\u0e01\u0e01\u0e27\u0e48\u0e32 1app \u0e17\u0e33\u0e43\u0e2b\u0e49\u0e1c\u0e21\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e2d\u0e32 app \u0e01\u0e32\u0e23\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e41\u0e1a\u0e1a\u0e15\u0e32\u0e23\u0e32\u0e07(\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14) \u0e41\u0e25\u0e30 form(\u0e01\u0e32\u0e23\u0e01\u0e23\u0e2d\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e1e\u0e34\u0e48\u0e21) \u0e17\u0e35\u0e48\u0e1c\u0e21\u0e40\u0e02\u0e35\u0e22\u0e19\u0e41\u0e22\u0e01 app \u0e44\u0e27\u0e49 \u0e21\u0e32\u0e2d\u0e22\u0e39\u0e48\u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e14\u0e35\u0e22\u0e27\u0e01\u0e31\u0e19\u0e44\u0e14\u0e49 \u0e40\u0e1b\u0e47\u0e19\u0e15\u0e49\u0e19<\/li><li>\u0e1c\u0e21\u0e41\u0e22\u0e01 directive \u0e2d\u0e2d\u0e01\u0e40\u0e1b\u0e47\u0e19 function (\u0e0b\u0e36\u0e48\u0e07\u0e17\u0e33\u0e43\u0e2b\u0e49\u0e1c\u0e21\u0e40\u0e02\u0e35\u0e22\u0e19\u0e40\u0e1b\u0e47\u0e19 file.js \u0e41\u0e22\u0e01\u0e2d\u0e2d\u0e01\u0e44\u0e1b\u0e44\u0e14\u0e49) \u0e42\u0e14\u0e22\u0e43\u0e2b\u0e49\u0e2a\u0e48\u0e27\u0e19 return \u0e21\u0e35 controller \u0e23\u0e27\u0e21\u0e2d\u0e22\u0e39\u0e48\u0e14\u0e49\u0e27\u0e22 \u0e01\u0e32\u0e23\u0e17\u0e33\u0e40\u0e0a\u0e48\u0e19\u0e19\u0e35\u0e49 \u0e17\u0e33\u0e43\u0e2b\u0e49\u0e1c\u0e21\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e41\u0e22\u0e01 event.function \u0e17\u0e35\u0e2a\u0e31\u0e21\u0e1e\u0e31\u0e19\u0e18\u0e4c\u0e01\u0e31\u0e1a directive \u0e19\u0e31\u0e49\u0e19\u0e46 \u0e23\u0e27\u0e21\u0e2d\u0e22\u0e39\u0e48\u0e43\u0e19\u0e17\u0e35\u0e48\u0e40\u0e14\u0e35\u0e22\u0e27\u0e01\u0e31\u0e19\u0e41\u0e25\u0e30\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e22\u0e01\u0e44\u0e1b\u0e43\u0e0a\u0e49\u0e44\u0e14\u0e49\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e01\u0e31\u0e19 (\u0e2d\u0e22\u0e48\u0e32\u0e07 myDirectiveSubmit \u0e1c\u0e21\u0e21\u0e35\u0e1b\u0e38\u0e48\u0e21 submit \u0e1e\u0e23\u0e49\u0e2d\u0e21 function \u0e15\u0e34\u0e14\u0e44\u0e1b\u0e14\u0e49\u0e27\u0e22 \u0e42\u0e14\u0e22\u0e1c\u0e21\u0e41\u0e22\u0e01 $scope.formID \u0e2d\u0e2d\u0e01\u0e21\u0e32\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e23\u0e30\u0e1a\u0e38 formID \u0e44\u0e14\u0e49)<\/li><li>\u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07\u0e04\u0e48\u0e32 json \u0e1c\u0e48\u0e32\u0e19 data-ng-init \u0e17\u0e33\u0e44\u0e14\u0e49\u0e42\u0e14\u0e22\u0e01\u0e32\u0e23\u0e43\u0e2a\u0e48\u0e04\u0e48\u0e32 json \u0e25\u0e07\u0e44\u0e1b\u0e14\u0e37\u0e49\u0e2d\u0e46 \u0e42\u0e14\u0e22\u0e43\u0e2b\u0e49\u0e23\u0e30\u0e27\u0e31\u0e07\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07 quote (&#8216;,&#8221;) \u0e41\u0e15\u0e48\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e2a\u0e48\u0e07\u0e04\u0e48\u0e32\u0e1c\u0e48\u0e32\u0e19\u0e15\u0e31\u0e27\u0e41\u0e1b\u0e23\u0e44\u0e14\u0e49(\u0e2d\u0e31\u0e19\u0e19\u0e35\u0e49\u0e44\u0e21\u0e48\u0e23\u0e39\u0e49\u0e40\u0e2b\u0e21\u0e37\u0e2d\u0e19\u0e01\u0e31\u0e19\u0e27\u0e48\u0e32\u0e40\u0e1e\u0e23\u0e32\u0e30\u0e2d\u0e30\u0e44\u0e23 \u0e40\u0e1e\u0e23\u0e32\u0e30 \u0e1e\u0e2d\u0e44\u0e1b\u0e43\u0e0a\u0e49 $scope \u0e43\u0e19 controller \u0e01\u0e25\u0e31\u0e1a\u0e17\u0e33\u0e44\u0e14\u0e49 )<\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u0e2a\u0e34\u0e48\u0e07\u0e17\u0e35\u0e48\u0e19\u0e48\u0e32\u0e2a\u0e19\u0e43\u0e08 <br>\u0e20\u0e32\u0e22\u0e43\u0e19 directive return \u0e21\u0e35\u0e2d\u0e30\u0e44\u0e23\u0e1a\u0e49\u0e32\u0e07 \u0e43\u0e19 document \u0e2b\u0e25\u0e31\u0e01 \u0e1c\u0e21\u0e2d\u0e48\u0e32\u0e19\u0e41\u0e25\u0e49\u0e27\u0e44\u0e21\u0e48\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08 \u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e01\u0e47\u0e44\u0e21\u0e48\u0e0a\u0e31\u0e14\u0e40\u0e08\u0e19 (\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\u0e19\u0e35\u0e49\u0e1c\u0e21\u0e44\u0e14\u0e49\u0e08\u0e32\u0e01\u0e01\u0e32\u0e23\u0e04\u0e49\u0e19 web stack overflow) \u0e41\u0e15\u0e48\u0e40\u0e17\u0e48\u0e32\u0e17\u0e35\u0e48\u0e40\u0e2b\u0e47\u0e19 \u0e19\u0e2d\u0e01\u0e08\u0e32\u0e01 template, link, controller \u0e22\u0e31\u0e07\u0e21\u0e35 templateUrl \u0e0b\u0e36\u0e48\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e01\u0e43\u0e0a\u0e49 template \u0e08\u0e32\u0e01 file \u0e02\u0e49\u0e32\u0e07\u0e19\u0e2d\u0e01 (\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e27\u0e48\u0e32 \u0e08\u0e30\u0e43\u0e0a\u0e49\u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e1a template \u0e44\u0e21\u0e48\u0e44\u0e14\u0e49)<br>document: <a href=\"https:\/\/docs.angularjs.org\/guide\/directive\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/docs.angularjs.org\/guide\/directive<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e42\u0e1b\u0e23\u0e41\u0e01\u0e23\u0e21\u0e44\u0e21\u0e48\u0e04\u0e27\u0e23\u0e15\u0e49\u0e2d\u0e07\u0e40\u0e02\u0e35\u0e22\u0e19\u0e07\u0e32\u0e19\u0e0b\u0e49\u0e33\u0e46 \u0e41\u0e15\u0e48\u0e04\u0e27\u0e23\u0e40\u0e1b\u0e47\u0e19\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49 module \u0e2b\u0e23\u0e37\u0e2d function \u0e01\u0e25\u0e32\u0e07\u0e17\u0e35\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e19\u0e33\u0e01\u0e25\u0e31\u0e1a\u0e21\u0e32\u0e43\u0e0a\u0e49\u0e43\u0e2b\u0e21\u0e48\u0e44\u0e14\u0e49 \u0e09\u0e30\u0e19\u0e31\u0e49\u0e19 \u0e01\u0e32\u0e23\u0e41\u0e22\u0e01\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e43\u0e2b\u0e49\u0e40\u0e1b\u0e47\u0e19\u0e2d\u0e34\u0e2a\u0e23\u0e30\u0e15\u0e48\u0e2d\u0e01\u0e31\u0e19\u0e08\u0e36\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e34\u0e48\u0e07\u0e17\u0e35\u0e48\u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e21\u0e32\u0e01\u0e04\u0e23\u0e32\u0e27\u0e19\u0e35\u0e49\u0e40\u0e23\u0e32\u0e21\u0e32\u0e25\u0e2d\u0e07\u0e14\u0e39\u0e27\u0e48\u0e32 AngularJS \u0e17\u0e33\u0e41\u0e1a\u0e1a\u0e19\u0e31\u0e49\u0e19\u0e44\u0e14\u0e49\u0e2b\u0e23\u0e37\u0e2d\u0e44\u0e21\u0e48<\/p>\n","protected":false},"author":15,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,9],"tags":[15],"class_list":["post-108","post","type-post","status-publish","format-standard","hentry","category-internet-and-www","category-web-design","tag-angularjs"],"_links":{"self":[{"href":"https:\/\/www.izziweb.com\/blog\/wp-json\/wp\/v2\/posts\/108","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.izziweb.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.izziweb.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.izziweb.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.izziweb.com\/blog\/wp-json\/wp\/v2\/comments?post=108"}],"version-history":[{"count":1,"href":"https:\/\/www.izziweb.com\/blog\/wp-json\/wp\/v2\/posts\/108\/revisions"}],"predecessor-version":[{"id":109,"href":"https:\/\/www.izziweb.com\/blog\/wp-json\/wp\/v2\/posts\/108\/revisions\/109"}],"wp:attachment":[{"href":"https:\/\/www.izziweb.com\/blog\/wp-json\/wp\/v2\/media?parent=108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.izziweb.com\/blog\/wp-json\/wp\/v2\/categories?post=108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.izziweb.com\/blog\/wp-json\/wp\/v2\/tags?post=108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}