使用AngularJS和指令的初学者问题 – 包装jQuery组件
首先,我应该提一下我正在努力过渡到客户端编程.我对js很新.我以前的经验主要是在C和一些装配.几年前我还做了一些非常简单的
PHP,当时它还是4.0.所以简而言之,是javascript的新手,但我还是把它放了一下.
我做了很多搜索和潜伏,但未能纠正我的问题. 我正在弄清楚AngularJS的一些基础知识并且它非常好,但我很难理解指令的工作方式以及如何从自定义控件访问数据. 长话短说我试图使用angularjs为bootstrap工作制作一个自定义控件,这样我就可以在表单中正确使用它. 这是控件:http://tarruda.github.com/bootstrap-datetimepicker/ 我有一些其他的控件,我想要工作,但我想如果我可以得到这一个我可以很容易得到其他人. 以下是我在此时所拥有的基本框架的链接:http://jsfiddle.net/uwC9k/6/ 首先,我试图在模板工作后如何初始化控件(其中,我认为此时我做的很多) link: function(scope,element,attr) { attr.$observe('dpid',function(value) { if(value) { $('#' + scope.dpid).datetimepicker({ language: 'en',pick12HourFormat: true }); } 当我把它放在link指令中时,它什么也没做.我甚至没有看到任何错误. scope.dpid确实显示了控件的ID,所以我认为它会起作用.但是唉,我对javascript的了解,告诉我,我不在范围之内,或者是一些无法访问元素的废话. 一旦我开始这样做,我不确定如何以表格形式访问这些数据. 任何帮助是极大的赞赏. 更新 更新2 当我创建对象时,我就这样做了. var elDatepicker = element.datetimepicker({ language : 'en',pick12HourFormat : true,}); 但是,当我尝试使用这个对象时,似乎没有得到正确的对象,或者我只是缺少一些基本知识.无论哪种方式,这肯定让我感到愚蠢. console.log(elDatepicker.getDate()); 这失败了,getDate确实是一个方法,至少它看起来像是在插件的代码中. 解决方法
您可以找到()模板的第一个div,然后应用datetimepicker(),而不是隔离范围.因此,您的HTML中不需要ID:
<datepicker model="mydate"></datepicker> mydate = {{mydate}} 我还建议替换:true: .directive('datepicker',function ($parse) { return { restrict: 'E',replace: true,template: '<div class="well"><div class="input-append">' + '<input data-format="MM/dd/yyyy HH:mm:ss PP" type="text"></input>' + '<span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span>' + '</div></div>',link: function (scope,attr) { var picker = element.find('div').datetimepicker({ language: 'en',pick12HourFormat: true }); var model = $parse(attrs.model); picker.on('changeDate',function(e) { console.log(e.date.toString()); console.log(e.localDate.toString()); model.assign(scope,e.date.toString()); scope.$apply(); }); } }; }) Fiddle $parse有点棘手.我展示的是它的主要用例:我们解析一个属性并获取一个函数,该函数上有一个assign()方法,允许我们更改scope属性. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |