Passing scope in on 'click' callback function angularjs

Question

HTML:

  <body ng-app="EditApp">
    <div ng-controller="MainController">
    <h1 click-to-edit>This is something I want to edit</h1>

    </div>
  </body>

Javascript:

angular.module("EditApp", [])
.controller("MainController", ['$scope', function($scope){
  $scope.text = "This is something I would like to edit";

}])
.directive("clickToEdit", function(){
  return {
    restrict: 'EA',
    template: " <input type='text' value='{{ text }}' ng-show='showInput'/> <div ng-transclude ng-hide='showInput'></div>",
    transclude: true,
    link: function (scope, element, attrs) {
      scope.showInput = false
      element.on("click", function(){

        scope.$parent.showInput = true

      })
    } 
  }
})

Why is the showInput not changing? Or is it but I have to do a scope.$apply() ? Should I be passing in the scope somehow within the on click function?

Thanks!

PSL · Accepted Answer · 2014-09-22 20:20:02Z

1

Attach an ng-click on the transclusion container, and you don't need to use $parent on scope as well. And yes it is not updating because

you are updating wrong scope.
angular does not know about the scope being updated from the handler registered externally unless you do, or until next digest cycle refresh will not happen :-

element.on("click", function(){ scope.showInput = true scope.$apply(); });

Try:-

.directive("clickToEdit", function(){
  return {
    restrict: 'EA',
    template: " <input type='text' value='{{ text }}' ng-show='showInput'/> <div  ng-click='showClick()' ng-transclude ng-hide='showInput'></div>",
    transclude: true,
    link: function (scope, element, attrs) {
      scope.showInput = false;
      scope.showClick = function(){
         scope.showInput = true
      }
    } 
  }
});

Plnkr

Plnkr2 update text on blur

edited Sep 22, 2014 at 20:20

answered Sep 22, 2014 at 19:20

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mohamed El Mahallawy Over a year ago

Yes! That works perfectly - cannot believe I didn't think of ngclicks

PSL Over a year ago

@MohamedElMahallawy As much as possibly I would suggest to go with angular way of registering events so you don't end up with scope synchronization issues like these.. :)

Collectives™ on Stack Overflow

Passing scope in on 'click' callback function angularjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related