I want to use angularjs and my97datepicker to make something. I wrote a direcitve to synchronize the value to the scope after clicking to select the time. The description is a bit confusing, take a look at the main code:
javascript
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(); }); //問題在這里,無法取到變化的值,而且加上這個(gè),連初始的值都無法顯示出來。 scope.$watch(attr.value,function(newVal){ scope.date=newVal; }); } }; });
Online address: http://jsfiddle.sinaapp.com/4zz6nvadg/embedded。初學(xué)angularjs,每次寫directive都是卡在$watch這里。
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:
$watch
related code first to ensure that the plug-in is executed correctly2014-10-14
appear in the DOM? $watch
部分你監(jiān)視的是 attr.value
,然而根據(jù)截圖可以發(fā)現(xiàn)插件設(shè)定的日期根本就不是保存在 input[value]
這里,無論如何 input[value]
part, what you are monitoring is attr.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$watch
所做的僅僅是讀取一個(gè)不存在的值,并且覆蓋了 model
,這就是為什么加上 $watch
部分之后,連 model
does is read a non-existent value and overwrite model
, which is why after adding the model
is invalid reason.
input[value]
去,要么反過來,找到正確的地方去取值去 $watch
After knowing the reason, the solution is simple, either let the plug-in write the value you want to input[value]
, or vice versa, find the right place to get the value
$watch
After 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
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
$watch
If you want to use
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].value
Note that the first parameter here cannot be directly
scope.$digest()
,否則 scope.date
And you have to rely on the callback function of the plug-in here
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:
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. 這個(gè)綁定只是說要去綁定這個(gè)屬性值對應(yīng)的變量
Of course, you cannot watch the value change.
In fact, using ng-model and ng-change is enough.
It might end up like this:
<input ng-model="date" date-picker />
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