AngularJS - jQuery UI - 使用 ng-csv 时的绑定问题答案

【问题标题】：AngularJS - jQuery UI - binding issue when ng-csv usedAngularJS - jQuery UI - 使用 ng-csv 时的绑定问题
【发布时间】：2015-03-05 12:45:12
【问题描述】：

我正在尝试将日期选择器添加到我正在使用 Angular js 进行数据绑定的 HTML 页面。我还需要使用 ng-csv 指令将数据导出到 CSV 文件。

我已经尝试过堆栈中存在的问题

AngularJS - jQuery UI - binding issue

这是我的小提琴

https://jsfiddle.net/DivB/4uae2gor/3/

html

<div ng-app="myApp">
<div ng-app="myApp">
<div ng-controller="MainCtrl">
    <p><b>Date from</b> <input id="date1" value="1/1/1980"  ng-model="fromDate" my-datepicker /></p>
    <p><b>Data do:</b> <input id="date2" value="1/1/1980" ng-model="toDate" my-datepicker /></p>
    Choosen date from: {{fromDate}} to: {{toDate}}
    <br />
     <button type="button" class="btn btn-primary" ng-csv="getArray" csv-header="getHeader()" filename="CO_Status.csv" field-separator=","><span>Export to CSV</span></button> </br>
</div>

和脚本

  var myApp = angular.module('myApp', ['myApp.directives','ngSanitize','ngCsv']);
function MainCtrl($scope) {   
$scope.getHeader = function () {return ["CO Number", "Client Name" ]};  
$scope.getArray = [ {A:"a",B:"b"},{A:"c",B:"d"}     ];                                          
 }
     angular.module('myApp.directives', [])
   .directive('myDatepicker', function() {
    return function(scope, element, attrs) {     
 element.datepicker({
     changeYear : true,
     changeMonth : true,
     appendText : '(yyyy-mm-dd)',
     dateFormat : 'yy-mm-dd', 
            onSelect: function(dateText, inst) {                     
                var mdlAttr = $(this).attr('ng-model');
                scope[attrs.ngModel] = dateText;                    
                scope.$apply();                                                   
            }                
    });
}
  });

如果我删除与 ng-csv 相关的所有内容（外部资源 ng-csv 和 sanitize，在应用程序模块中包含 'ngcsv' 和 'ngSanitize'）以使代码正常工作。但是合起来就不行了。

谁能帮帮我？提前致谢。

【问题讨论】：

真的不清楚你的具体问题是什么。你提到了 datepicker 和 csv。代码不会在不抛出错误的情况下停止工作......它们是什么？为什么要包含所有脚本的副本？
另外，为什么要同时包含缩小和未缩小的 js 文件？您现在拥有几乎所有内容的重复 js 文件。我建议您只添加缩小版本（所有 min.js 文件）并留下较大的版本，以便更快地加载。
感谢您的回复。 .我对 angularjs 和 jquery 很陌生。我现在无法访问我的代码。我将在 minday 上提供有关我的代码的更多详细信息
我添加了不起作用的小提琴..jsfiddle.net/DivB/4uae2gor/3

标签： jquery angularjs jquery-ui angularjs-directive datepicker

【解决方案1】：

下面的方法现在对我有用

仅按以下顺序添加 CDN

jquery
jQuery 用户界面
角度js
角度清理
ng-csv

我已经使用了 bootstarp 以及上面添加的内容。不需要休息

如下编辑你的html

<p><b>Date from</b> <input id="date1" datepicker date="fromDate" /></p>

在脚本中添加以下指令

myApp.directive('datepicker',function(){
  return{
    scope:{
    date: "="
    },
    link : function (scope, element, attrs) {
        scope.$watch('date', function(value){
            $(element).datepicker('setDate',value);
        }),
        $(function(){
            $(element).datepicker({
                       changeYear : true,
            changeMonth : true,
            appendText : '(dd/mm/yyyy)',
                dateFormat: 'dd/mm/yy',
                onSelect:function (date) {
                    scope.date = date;
                    scope.$apply();
                }
            });

        });
    }
}
})

【讨论】：