Angular directive template input doesn't update directive scope

Question

I have a custom directive with isolated scope, and in it's link function I am setting some additional scope variables like:

templateUrl:"chat.html",
scope:{},
link: function (scope, element, attrs) {
            scope.chat;
            scope.send_txt="";
            scope.use_enter = false;
            scope.other;

in my chat.html I have an input element like

....
...

...

Normally when I set the scope.send_txt within my link, the value is correctly reflected in the textarea, but as soon as I type something in the textarea the scope.send_txt variable stops updating, as if the textarea now has it's own scope. Any ideas what the issue might be?

EDIT:

Directive:

'use strict';

angular.module('chatApp')
  .directive('chatpane', [
    '$http',
    'socket',
    'message',
    '$mdDialog',
    '$mdMedia',
    function ($http,socket,message,$mdDialog,$mdMedia) {
      return {
        templateUrl: 'app/dashboard/message/chatpane/chatpane.html',
        restrict: 'E',
        scope:{
            thread : "=thread",
            owner : "=owner",
        },
        link: function (scope, element, attrs) {
          /*console.log("chat: ",nv, " : ",ov);*/
            scope.chat;
          scope.send_txt="";
            scope.use_enter = false;
            scope.other;

            scope.$watch("thread",function(nv,ov,scope){
                if(nv){
                    $http.get('api/messages/threads/'+nv._id+'/0').then(function(d){
                                    scope.chat = d.data;
                                    scope.other = (scope.owner!=scope.thread.owner._id)?scope.thread.owner._id:scope.thread.recipient._id;
                                    //mark thread read
                              message.markThreadRead(scope.thread._id);
                                })
                }
            },true);

          scope.$watch("send_txt",function(nv,ov,scope){
            console.log("chat: ",nv, " : ",ov);
          },true);

            scope.$watch('chat', function(newValue, oldValue, scope) {
            if(element.find('.msg_inbox_msgs').length>0){
              element.find('.msg_inbox_msgs').stop(true,true).animate({scrollTop:(element.find('.msg_inbox_msgs')[0].scrollHeight+(element.find('.msg_inbox_msgs>div').length*20))+'px'}, 1000);
            }
            });

            scope.post = function(txt){
                var tmp = txt || scope.send_txt;
                scope.send_txt = "";
                console.log("Posting: ",scope.send_txt);
            if(tmp && _.trim(tmp)!=""){
              $http.post('api/messages',{message:tmp, owner:scope.owner, recipient:scope.other, parent: scope.thread._id}).then(function(d){
                //scope.chat.push(d.data);
                //console.log("Response: ",d);
                //console.log("chat: ",scope.chat);
              });
            }else{
              console.log("Posting: ",scope.send_txt);
            }
            }

          scope.acceptReferralRequest = function() {
            $http.post('api/messages/acceptReferralRequest/'+scope.thread._id).then(function(d){
              scope.thread.status = "accepted";
                });
          }
          scope.ignoreReferralRequest = function() {
            $http.post('api/messages/ignoreReferralRequest/'+scope.thread._id).then(function(d){
              scope.thread.status = "ignored";
                });
          }

            element.bind("keydown keypress", function (event) {
                if(event.which === 13 && scope.use_enter) {
                    scope.post();
                    event.preventDefault();
                }
            });

            scope.refer = function(ev){
              var my_connections = [];
              $http.get('api/users/get-all-connections').then(function(d){
                for(var i in d.data){
                  var ii = _.findIndex(my_connections,{'_id':d.data[i]._id});
                  if(ii!=-1){
                    if(my_connections[ii].relation.indexOf(d.data[i].relation) == -1){
                      my_connections[ii].relation = my_connections[ii].relation +", "+d.data[i].relation;
                    }
                  }else{
                    my_connections.push(d.data[i]);
                  }
                }

                //show popup
                var useFullScreen = ($mdMedia('sm') || $mdMedia('xs'));
                $mdDialog.show({
                  controller: function(scope,$mdDialog){
                    scope.connections = my_connections;
                    scope.heading = "Refer";
                    scope.isAuthorized = true;
                    scope.cancel = function(){
                      $mdDialog.cancel();
                    };
                    scope.hide =  function(user_url){
                      $mdDialog.hide(user_url);
                    }
                  },
                  templateUrl: 'app/dashboard/message/chatpane/refer.html',
                  parent: angular.element(document.body),
                  targetEvent: ev,
                  clickOutsideToClose: true,
                  fullscreen: useFullScreen
                })
                .then(function(user_url) {
                  if(scope.send_txt && scope.send_txt!=""){
                    scope.send_txt += " #"+user_url+" ";
                  }else{
                    scope.send_txt = "I would like to recommend #"+user_url+" ";
                  }
                }, function() {
                  scope.status = 'You cancelled the dialog.';
                })
              });

            };



            var handleSelf = function(d){
                if((d.parent == scope.thread._id) && scope.owner==d.owner._id){
                    scope.chat.push(d);
                }
                //console.log("socket self: ",d);
           };
            socket.socket.removeListener('message:posted',handleSelf);
            socket.socket.on('message:posted',handleSelf);

            var handleRemote = function(d){
                if((d.parent == scope.thread._id) && scope.owner==d.recipient._id){
                    scope.chat.push(d);
                }
                //console.log("socket remote: ",d);
           };
            socket.socket.removeListener('message:unread',handleRemote);
            socket.socket.on('message:unread',handleRemote);
        }
      };
    }]);

Template:

{{send_txt}}
    
        
            
        
        
            {{ thread.title}}
        
        
            {{ thread.message | limitTo:20 }}
        
    
    
        
            {{ch.message}}
        
    
    
        
            
        
         Submit on enter
        
        
    





    
        
            
        
        
            {{ thread.owner.name }}
        
        
            has asked for a referral
        
    
    
        
            
        
        
            You
        
        
            have asked for a referral
        
    
    
    
        
            {{ch.message}}
        
    
    
    
    
        
            {{ch.message}}
        
        
          
          
        
    
    
    
    
        
            {{ch.message}}
        
        
          - Request has been ignored -
        
    
    
    
        
            
        
         Submit on enter
        
        
        {{send_txt}}

malix · Accepted Answer

You should always have a . with ng-model or strange things can happen as new scopes may be introduced...

https://github.com/angular/angular.js/wiki/Understanding-Scopes

As specified in the spec:

First ngModel will try to bind to the property given by evaluating the expression on the current scope. If the property doesn't already exist on this scope, it will be created implicitly and added to the scope.

Second: By default, ngModel watches the model by reference, not value. This is important to know when binding inputs to models that are objects (e.g. Date) or collections (e.g. arrays). If only properties of the object or collection change, ngModel will not be notified and so the input will not be re-rendered.

So if you refer directly, your reference might get "lost", which doesn't happen with a ....

Try:

templateUrl:"chat.html",
scope:{},
link: function (scope, element, attrs) {
  scope.info = {
    send_txt: ""
  };

And

Angular directive template input doesn't update directive scope

Answers (1)

Related Questions

Angular directive template input doesn&#39;t update directive scope

Answers (1)

Related Questions

Angular directive template input doesn't update directive scope