I don’t know how to solve it, because I have never used the plug-in you used, and I don’t have time to study it now. But I can tell you where the problem is, and you can try to find a solution on your own. Take a look at the screenshot first:

1. Comment out the$watchrelated code first to ensure that the plug-in is executed correctly
2. Pay attention to the following: Where does2014-10-14appear in the DOM?
3. In the$watch部分你监视的是attr.value，然而根据截图可以发现插件设定的日期根本就不是保存在input[value]这里，无论如何input[value]part, what you are monitoring isattr.value. However, according to the screenshot, you can find that the date set by the plug-in is not saved here at all.input[value], anywayinput[value] are all empty values
4. Therefore, all$watch所做的仅仅是读取一个不存在的值，并且覆盖了model，这就是为什么加上$watch部分之后，连modeldoes is read a non-existent value and overwritemodel, which is why after adding the
part, even modelis invalid reason.

input[value]去，要么反过来，找到正确的地方去取值去$watchAfter knowing the reason, the solution is simple, either let the plug-in write the value you want toinput[value], or vice versa, find the right place to get the value

, specifically You can check the documentation or source code of the plug-in yourself.

---

$watchAfter dinner, let me take a look at the source code of the plug-in. In fact, they provide several event callback functions, and you don’t have to use

. The code is as follows:

var datepicker=angular.module("datepicker",[]); datepicker.controller("datepickerCtrl",function($scope){ $scope.date="2014-10-14"; }); datepicker.directive("datePicker",function(){ return { restrict:"A", link:function(scope, element, attr){ element.bind("click", function () { window.WdatePicker({ onpicked: function () { scope.$apply(scope.date = this.value); } }); }); } }; });

Demo: http://jsfiddle.sinaapp.com/4zz6n9usy

$watchIf you want to use

, you can also write it like this:

var datepicker=angular.module("datepicker",[]); datepicker.controller("datepickerCtrl",function($scope){ $scope.date="2014-10-14"; }); datepicker.directive("datePicker",function(){ return { restrict:"A", link:function(scope, element, attr){ element.bind("click", function () { window.WdatePicker({ onpicked: function () { scope.$digest(); } }); }); scope.$watch( function () { return element[0].value }, function (newValue) { scope.date = newValue; } ); } }; });

Demo: http://jsfiddle.sinaapp.com/4zz6n9t9q

element[0].valueNote that the first parameter here cannot be directly

, because this value is a primitive string, not an object encapsulated by angular, so you need to use a getter function to get it explicitly, otherwise you can't get it.

scope.$digest()，否则scope.dateAnd you have to rely on the callback function of the plug-in here

It will not update automatically. It can be seen that the first example is simpler and has better performance.

I don’t know why it is used like this. Here you need to clarify a concept. Properties and scope are different. If you want to bind the property value to the scope, you need to declare the scope in the directive. There are three ways:

• =attr bidirectional
• @attr one way
• &attr function

According to your thinking, it may be the following way:

scope: { value: '=value' }

But even if binding is done, you must understand that the value change of this element's value is not monitored by Angular by default.这个绑定只是说要去绑定这个属性值对应的变量Of course, you cannot watch the value change.
In fact, using ng-model and ng-change is enough.

It might end up like this:

Try passing $scope in! $watch is based on $scope

I didn’t find the detailed documentation for link, and I’m not sure how to use attr, but I think you can try $watching the value of element.

As for the two people above, scope in the directive is its $scope, and attr is a parameter in the link and does not need to be defined separately.

Hello poster, how can I solve this problem? Now the value I get from ng-model is still undefined