CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsangularjs-directive
Julo0sS
Julo0sS

Reputation: 2102

Update scope from directive and watch with another one

Here is the problem :

I try to do things like this :

  1. Click on a directive triggers an event
  2. Event sends data to a rootScope function which sets a scope variable value with new data
  3. Another directive has a ng-model in its template which is supposed to reflect the previously changed var
  4. Data should be updated in the view AND model. Model is ok (update done), but view update does not seem to trigger automatically, it only updates when I click on the "show button" (see fiddle)

Here is the corresponding jsfiddle I made, with comments :

http://jsfiddle.net/wkmm576m/7/

Here is the code which I think is making trouble... : 

app.directive('addEditInput', function() {
    return {
        restrict : 'E',
        template : '<div id="editForm"><input type="text" ng-model="currentVar.name" /><br/></div>'
    }
});

In fact, I return a template, with ng-model. But the ng-model is not updated when its value changes from anywhere else...

Tbh, I'm a bit confused with directives and scopes communications - data....

Thanks for reading / help

Upvotes: 0

Views: 724

Answers (1)

Petr Averyanov
Petr Averyanov

Reputation: 9476

Short answer - you need to call $scope.$apply in top controller: http://plnkr.co/edit/QEjzlsJj4fh1eeqBXSvt?p=preview

Long answer: you bind usual js function to usual js event, so when user clicks on element - your function executes. Thats all. When you use ng-click - it will trigger digest cycle and your bindings will be updated. So you need to trigger it manually, so you call $scope.$apply.

Note: better do not use jquery where you do not need to. I.e. use $element.bind('click',function(){ instead of $().on...

Upvotes: 2

Related Questions