{"id":1792,"date":"2022-08-30T15:19:29","date_gmt":"2022-08-30T15:19:29","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/12\/02\/scope-watch-in-angular-directive-does-not-work-proprely-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:19:29","modified_gmt":"2022-08-30T15:19:29","slug":"scope-watch-in-angular-directive-does-not-work-proprely-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/scope-watch-in-angular-directive-does-not-work-proprely-collection-of-common-programming-errors\/","title":{"rendered":"scope.$watch in angular directive does not work proprely-Collection of common programming errors"},"content":{"rendered":"<p>I&#8217;m using Angular and Bootstrap. I&#8217;m trying to replicate the functionality of ng-model for bootstrap checkbox. What i would like to accomplish is:<\/p>\n<p>i would like that when i click on the checkbox (label really) the model change, and actually that works&#8230; but what does not work that when i try to watch the object for changes the behavior is weired, because i need two click insted of one for disable or enable the checkbox. Moreover if inside the the label element that has as attribute cm-checkbox=&#8221;model.prop&#8221; i put a {{model.anotherprop}} wont work (does not render anything).<\/p>\n<p>From the documentation i understood that because i want the two-way data bind the scope must be defined as i did.<\/p>\n<p>Thank you for your help!<\/p>\n<p>I have the following HTML:<\/p>\n<pre><code>\n      \n      same lable text\n\n<\/code><\/pre>\n<p>And the following JS:<\/p>\n<pre><code>directive('cmCheckbox', function() {\n  return {\n    restrict: 'A',\n    scope: {'cmCheckbox':'='},\n    link: function(scope,elm,attrs) {\n      scope.$watch('cmCheckbox', function() {\n          console.log(\"first value for \"+attrs.cmCheckbox+\" is: \"+scope.cmCheckbox);\n          if (!scope.cmCheckbox) {\n            console.log(\"checked\");\n            $(elm).removeClass(\"checked\");\n            $(elm).children(\"input\").removeAttr(\"checked\");\n          } else { \/\/ false and undefined\n            console.log(\"unchecked\");\n            $(elm).addClass(\"checked\");\n            $(elm).children(\"input\").attr(\"checked\",\"checked\");\n          }\n      });\n      $(elm).on('click', function(e) {\n        e.preventDefault();\n        var currentValue = elm.hasClass(\"checked\") ? false : true;\n        scope.$apply(function() {\n          scope.cmCheckbox = currentValue;\n        },true);\n        scope.$parent.$apply();\n      });\n    }\n  };\n}).\n<\/code><\/pre>\n<p>Here is the jsFiddle: jsfiddle.net\/pmcalabrese\/66pCA\/2<\/p>\n<p id=\"rop\"><small>Originally posted 2013-12-02 01:31:46. <\/small><\/p>","protected":false},"excerpt":{"rendered":"<p>I&#8217;m using Angular and Bootstrap. I&#8217;m trying to replicate the functionality of ng-model for bootstrap checkbox. What i would like to accomplish is: i would like that when i click on the checkbox (label really) the model change, and actually that works&#8230; but what does not work that when i try to watch the object [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1792","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1792","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1792"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1792\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1792"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1792"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}