从angularjs中的指令更新模型

时间:2017-08-18 18:22:31

标签: angularjs

我有一个拖放指令。

拖放效果很好,但我在更新模型时遇到问题。 在我将一些文本放入textarea之后,文本显示正常,但模型没有更新。

我在这里缺少什么?

//标记

function cmp($a, $b){   
    return (strtotime($a) < strtotime($b)) ? -1 : 1;
}
uasort ($sort_date,"cmp");

//指令

curl -X POST -H "Content-Type: application/json" -d '{
"persistent_menu":[
{
  "locale":"default",
  "composer_input_disabled":true,
  "call_to_actions":[
    {
      "title":"My Account",
      "type":"nested",
      "call_to_actions":[
        {
          "title":"Pay Bill",
          "type":"postback",
          "payload":"PAYBILL_PAYLOAD"
        }]
    }]  
   },
  {
  "locale":"zh_CN",
  "composer_input_disabled":false
  }
  ]
 }' "https://graph.facebook.com/v2.6/me/messenger_profile?
 access_token=YOUR_ACCESS_TOKEN_HERE"

1 个答案:

答案 0 :(得分:1)

更新textarea内的typeInTextarea模型并使用$apply运行摘要周期更新整个应用中的模型更改。对于具有仅具有链接函数的当前指令结构,您需要将范围传递给typeInTextarea函数(作为参数)。 所以你的功能将是:

function typeInTextarea(scope, el, newText) {
  var start = el.selectionStart
  var end = el.selectionEnd
  var text = el.value
  var before = text.substring(0, start)
  var after  = text.substring(end, text.length)
  el.value = (before + newText + after);
  scope.mymodel.textnote = el.value;
  el.selectionStart = el.selectionEnd = start + newText.length;
  el.focus();
}

和dropOnMe函数将是:

function dropOnMe() {
  var DDO = {
    restrict: 'A',
    link: function(scope, element, attrs) {
      element.on('dragover', function(event) {
        event.preventDefault();
      });
      element.on('drop', function(event) {
        event.preventDefault();
        var data = event.dataTransfer.getData("text");
        var x=document.getElementById(data);
        typeInTextarea(scope, event.target,x.getAttribute('data-value'))
        scope.$apply();
      });
    }
  };
  return DDO;
}

看看这个例子(我不知道你要拖动哪个元素,所以我考虑过span元素&amp;刚刚使用了innerHTML):

https://plnkr.co/edit/wGCNOfOhoopeZEM2WMd1?p=preview