Angular指令模板输入不会更新指令范围

时间:2016-03-18 14:37:00

标签: javascript angularjs

我有一个带有隔离范围的自定义指令,在它的link函数中我设置了一些额外的范围变量,如:

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

在我的chat.html我有一个像

这样的输入元素
....
...
<textarea ng-model="send_txt" class="form-control" placeholder="Message..." aria-describedby="basic-addon1" style="border:2px solid #0079BE; border-radius:5px;margin-bottom:5px;"></textarea>
...

通常当我在链接中设置scope.send_txt时,值会正确反映在textarea中,但只要在textarea中输入内容,scope.send_txt变量就会停止更新,就像textarea一样现在有自己的范围。任何想法可能是什么问题?

编辑:

指令:

'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);
        }
      };
    }]);

模板:

{{send_txt}}<div class="msg_inbox_cont" flex="column" flex layout-align="start stretch" ng-if="thread.group!='ask_referral'">
    <div class="msg_inbox_head" flex ng-if="thread.title">
        <div class="msg_topic_img col-sm-1 col-xs-3">
            <img ng-src="api/images/{{msg.currentThread.owner.profile_pic || 'default.png' }}" alt="" width="30"/>
        </div>
        <div class="msg_topic_header col-sm-10 col-xs-9">
            {{ thread.title}}
        </div>
        <div class="msg_topic_desc col-sm-10 col-xs-9">
            {{ thread.message | limitTo:20 }}
        </div>
    </div>
    <div class="msg_inbox_msgs" flex>
        <div ng-class="ch.owner._id == owner ? 'msg_inbox_msg mine' : 'msg_inbox_msg other'" ng-repeat="(key, ch) in chat">
            {{ch.message}}
        </div>
    </div>
    <div class="msg_inbox_input" flex>
        <div class="input-group">
            <textarea ng-model="send_txt" class="form-control" placeholder="Message..." aria-describedby="basic-addon1" style="border:2px solid #0079BE; border-radius:5px;margin-bottom:5px;"></textarea>
        </div>
        <span><input type="checkbox" ng-model="use_enter" style="vertical-align: text-top;" /> Submit on enter</span>
        <input type="button" ng-if='send_txt' class="pull-right btn btn-default btn-primary" ng-click="post()" value="Send"/>
        <input type="button" ng-if='!send_txt' class="pull-right btn btn-default btn-disabled" disabled value="Send"/>
    </div>
</div>


<!-- Ask Referral -->
<div class="msg_inbox_cont" flex="column" flex layout-align="start stretch" ng-if="thread.group=='ask_referral'">
    <div class="msg_inbox_head" flex ng-if="thread.owner._id!=owner">
        <div class="msg_topic_img col-sm-1 col-xs-3">
            <img ng-src="api/images/{{thread.owner.profile_pic || 'default.png' }}" alt="" width="30"/>
        </div>
        <div class="msg_topic_header col-sm-10 col-xs-9">
            {{ thread.owner.name }}
        </div>
        <div class="msg_topic_desc col-sm-10 col-xs-9">
            has asked for a referral
        </div>
    </div>
    <div class="msg_inbox_head" flex ng-if="thread.owner._id==owner">
        <div class="msg_topic_img col-sm-1 col-xs-3">
            <img ng-src="api/images/{{thread.owner.profile_pic || 'default.png' }}" alt="" width="30"/>
        </div>
        <div class="msg_topic_header col-sm-10 col-xs-9">
            You
        </div>
        <div class="msg_topic_desc col-sm-10 col-xs-9">
            have asked for a referral
        </div>
    </div>
    <!-- accepted -->
    <div class="msg_inbox_msgs" flex ng-if="thread.status=='accepted'">
        <div ng-class="ch.owner._id == owner ? 'msg_inbox_msg mine' : 'msg_inbox_msg other'" ng-repeat="(key, ch) in chat">
            {{ch.message}}
        </div>
    </div>
    <!-- accepted -->
    <!-- available / pending acceptance -->
    <div class="msg_inbox_msgs" flex ng-if="thread.status=='available'">
        <div ng-class="ch.owner._id == owner ? 'msg_inbox_msg mine' : 'msg_inbox_msg other'" ng-repeat="(key, ch) in chat">
            {{ch.message}}
        </div>
        <div style="clear:both;" ng-if="thread.owner._id!=owner">
          <input style="margin:10px;" type="button" class="pull-left btn btn-primary" value="Accept" ng-click="acceptReferralRequest()"/>
          <input style="margin:10px;" type="button" class="pull-left btn btn-warning" value="Ignore" ng-click="ignoreReferralRequest()"/>
        </div>
    </div>
    <!-- available / pending acceptance -->
    <!-- available / pending acceptance -->
    <div class="msg_inbox_msgs" flex ng-if="thread.status=='ignored'">
        <div ng-class="ch.owner._id == owner ? 'msg_inbox_msg mine' : 'msg_inbox_msg other'" ng-repeat="(key, ch) in chat">
            {{ch.message}}
        </div>
        <div style="clear:both;text-align:center;">
          <span style="color:#5e5e5e;font-weight:bold;"><small><em>- Request has been ignored -</em></small></span>
        </div>
    </div>
    <!-- available / pending acceptance -->
    <div class="msg_inbox_input" flex ng-if="thread.status=='accepted'">
        <div class="input-group">
            <textarea ng-model="send_txt" class="form-control" placeholder="Message..." aria-describedby="basic-addon1" style="border:2px solid #0079BE; border-radius:5px;margin-bottom:5px;"></textarea>
        </div>
        <span><input type="checkbox" ng-model="use_enter" style="vertical-align: text-top;" /> Submit on enter</span>
        <input type="button" ng-if='send_txt' class="pull-right btn btn-default btn-primary" ng-click="post(send_txt)" value="Send"/>
        <input type="button" ng-if='!send_txt' class="pull-right btn btn-default btn-disabled" disabled value="Send"/>
        <input type="button" ng-if='thread.owner._id!=owner' class="pull-right btn btn-default btn-primary" ng-click="refer($event)" value="Refer"/>{{send_txt}}
    </div>
</div>
<!-- Ask Referral -->

1 个答案:

答案 0 :(得分:0)

您应始终拥有. ng-model,否则可能会出现奇怪的事情,因为可能会引入新的范围......

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

如规范中所述:

首先 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.

第二: 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.

因此,如果您直接推荐,您的引用可能会丢失&#34;这不会发生. ......

尝试:

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

<textarea ng-model="info.send_txt" class="form-control" placeholder="Message..." 
    aria-describedby="basic-addon1" style="border:2px solid #0079BE; 
    border-radius:5px;margin-bottom:5px;"></textarea>