AngularJS-更改指令中的控制器模型

Question

There is a simple angular example http://codepen.io/snater/pen/mHsAt , what I want is on span click, controllers model changing from directive, and text field taking model's value. Is this possible?

Answer 1

I think you're using the wrong syntax to refer to ngModel, combined with the fact that probably ngModel is already used by Angular in some other way; if you change the name of the property you use to store the text, ie txtVal , and refer to it without scope. in the template, you should be able to change the value of the input upon clicking on the span.

Something like this:

 <div ng-controller="ctrl">

<input change-model txt-val="change_me" />

<p>{{change_me}}</p>

And in the js file:

app.directive "changeModel", ($compile) ->
  priotity: 0
  restrict: "A"
  scope:
     txtVal: '='
  link: (scope, element, attrs) -> 
     //Use txtVal instead of scope.txtVal here
     tpl = "<input ng-model='txtVal' /><span data-value='Write this to model' ng-click='clickHandle()'>Must paste text on click</span></span>"
    new_el = angular.element(tpl)
    scope.clickHandle = ->
       scope.txtVal = "some text" 

With these changes, clicking on the span updates both the value of the input and the content of the <p>